JavaScript防抖

发表于 | 分类于 | 阅读次数:

JavaScript防抖

防抖就是持续触发的事件中，最后一个事件触发时在一定时间周期后再执行这个事件。

也就是说，每次触发事件，如果这个事件还没执行，那么之前触发的事件会清除，以最后一个事件为主，等待的时间会重新开始。

当然也会分第一次是否执行。

第一版

简单的实现

1
2
3
4
5
6
7
8
9
10
11
// 第一版，时间戳, 默认是首次执行的
function debounce(fun, wait) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      fun.apply(context, args);
    }, wait);
  }
}

第二版

第三个参数是第一次是否执行。

当前immediate 为 true时，判断 first 是否第一次执行，第一次执行后，改变first的值，下次再触发就不再立即执行，最后一次执行是定时器里，要first复原，等待下次第一次执行。

result返回结果只有第一次会有效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function debounce(fun, wait, immediate) {
  var timeout, fisrt, result, context, args;
  return function() {
    context = this, args = arguments;
    if(immediate && !fisrt) {
      fisrt = true;
      result = fun.apply(context, args);
    }
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      fisrt = false;
      fun.apply(context, args);
      timeout = args = context = null;
    }, wait);
    return result;
  }
}