/**
|
* 闭包函数
|
*
|
* 防抖：对于短时间内连续触发的事件（滚动事件、表单重复提交、页面resize事件，常见于需要做页面适配的时候），让某个时间期限内，事件处理函数只执行一次。
|
* 节流：对于短时间内大量触发同一事件（滚动事件、输入框实时搜索），那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效
|
*/
|
export default {
|
// 防抖
|
debounce: function (fn, delay) {
|
// 时间期限
|
var delay = delay || 200;
|
var timer;
|
// 闭包
|
return function () {
|
// 考虑作用域，上下文环境，apply需要用到this对象
|
var th = this;
|
// 接收的参数用 ES6 中的 rest 参数统一存储到变量 args 中。arguments就是传入的参数数组,而且个数可以不确定的传回给fn（不确定函数到底有多少个参数，用arguments来接收）
|
var args = arguments;
|
// 判断还在定时，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
|
if (timer) {
|
clearTimeout(timer);
|
}
|
timer = setTimeout(function () {
|
timer = null;
|
// 执行方法
|
fn.apply(th, args);
|
}, delay);
|
};
|
},
|
// 节流 定时器 + 时间戳
|
throttle: function(func, delay) {
|
var timer = null
|
var startTime = Date.now()
|
return function() {
|
// 结束时间
|
var curTime = Date.now()
|
// 间隔时间 = 延迟的时间 - （结束时间戳 - 开始时间戳）
|
var interval = delay - (curTime - startTime)
|
var th = this
|
var args = arguments
|
clearTimeout(timer)
|
if(interval <= 0) {
|
// 证明可以触发了
|
func.apply(th, args)
|
// 重新计算开始时间
|
startTime = Date.now()
|
} else {
|
// 继续等待
|
timer = setTimeout(func, interval)
|
}
|
}
|
}
|
}
|
