节流和防抖

发表于 | 分类于

防抖

  1. 处理的事件
  • window 的 resize、scroll
  • mousedown、mousemove
  • keyup、keydown

  1. debounce 原理

    你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行

  2. 需要考虑的

  • 定时器：清除上一次的定时器，再创建新的定时器
  • this
  • event对象
    （debounce函数返回的函数，相当于直接作用于事件后面的函数）
  1. 实现
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    function debounce(func, wait) {
        var timeout;

        return function () {
            var context = this;
            var args = arguments;
            if(timeout) clearTimeout(timeout)
            clearTimeout(timeout)
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }


    <!--ES6-->
    function debounce (func, wait) {
        let timeout;
        return function (...args) {
            if (timeout) {
                clearTimeout(timeout)
            }
            timeout = setTimeout(() => {
                func.apply(this, args)
            }, wait)
        }
    }

节流

  1. 原理

    如果你持续触发事件，每隔一段时间，只执行一次事件

  2. 两种实现方式

    一种是使用时间戳，一种是设置定时器。

  3. 时间戳

当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行，不做任何处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function throttle(func, wait) {
    var context, args;
    var previous = 0;

    return function() {
        var now = +new Date(); 
        // + 是转时间戳的方法
        context = this;
        args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

4. 定时器

当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function throttle(func, wait) {
    var timeout;
    var previous = 0;

    return function() {
        context = this;
        args = arguments;
        // 当定时器不存在的时候
        if (!timeout) {
            timeout = setTimeout(function(){
                func.apply(context, args)
                timeout = null;
            }, wait)
        }
    }
}

// ES6
function throttle(func, wait) {
    var timeout;
    var previous = 0;

    return function(...args) {
        // 当定时器不存在的时候
        if (!timeout) {
            timeout = setTimeout(()=>{
                func.apply(args)
            },wait)
        }
    }
}

两种方法的比较：

  • 第一种事件会立刻执行，第二种事件会在 n 秒后第一次执行
  • 第一种事件停止触发后没有办法再执行事件，第二种事件停止触发后依然会再执行一次事件

防抖和节流的比较

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。

节流，在规定时间内，保证执行一次该函数；防抖，当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始 延时。