防抖和节流

防抖(debounce)

setTimeout 方法

1
2
3
4
5
6
7
8
9
10
11
var debounce = function(fn, delayTime) {
var timeId; // 用于存储定时器
// 闭包 防止 timeId 被销毁
return function() {
var context = this, args = arguments; // args 存储传入的参数
timeId && clearTimeout(timeout); // 判断定时器是否存在,存在则删除定时器
timeId = setTimeout(function{ // 添加定时任务
fn.apply(context, args);
}, delayTime)
}
}

思路解析:
执行 debounce 函数之后会返回一个新的函数,通过闭包的形式,维护一个变量 timeId ,每次执行该函数的时候会结束之前的延迟操作,重新执行 setTimeout 方法,也就实现了上面所说的指定的时间内多次触发同一个事件,会合并执行一次。

温馨提示:
  1. 上述代码中arguments只会保存事件回调函数中的参数,譬如:事件对象等,并不会保存 fn、delayTime
  2. 使用 apply 改变传入的fn方法中的this指向,指向绑定事件的 DOM 元素。
阅读更多
You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.