/**
|
* 函数防抖模块封装
|
* @author lautin
|
* @created 2019-11-20 18:44:32
|
*/
|
|
|
/**
|
* 防抖函数，在一个时段内反复触发时 更新定时器为最后一次延迟执行
|
* 该操作欠缺的地方在于 延迟执行，响应比较慢 最好是先执行
|
* @param {function} func 事件回调函数
|
* @param {number} wait 延迟等待时间，建议100-300ms左右
|
*/
|
function debounceA(func, wait) {
|
// 初始化定时器为空
|
let timer = null;
|
// 返回一个防抖的闭包函数，使用闭包来持久存储定时器
|
return function () {
|
const context = this, // this为事件源DOM
|
args = arguments; // arguments包含event
|
// 如果已有定时器 则取消上次的任务
|
if (timer) clearTimeout(timer);
|
// 更新定时器，本次（最后）任务n毫秒后触发
|
timer = setTimeout(() => {
|
// 还原事件回调函数触发时的环境
|
func.apply(context, args);
|
}, wait);
|
}
|
}
|
|
/**
|
* 防抖函数，在一个时段内反复触发时 更新定时器为最后一次延迟执行
|
* 该方法 先执行 后延迟 响应灵敏更高
|
* @param {function} func 事件回调函数
|
* @param {number} wait 延迟等待时间，建议100-300ms左右
|
*/
|
function debounceB(func, wait) {
|
let timer = null;
|
return function () {
|
const context = this,
|
args = arguments;
|
|
// 首先取消中间的定时器，重新开始计时
|
if (timer) clearTimeout(timer);
|
|
//先加载本次任务，
|
if (!timer) func.apply(context, args);
|
|
// 再进行定时器控制
|
timer = setTimeout(() => {
|
timer = null;
|
}, wait);
|
}
|
}
|
|
export default function debounce(func, wait, immediate = false) {
|
return immediate ? debounceB(func, wait) : debounceA(func, wait);
|
}
|
