防抖节流

发表于 | 分类于 | |

防抖

在触发事件n秒后执行，如果n秒内再次触发，则在n秒后执行

1
2
3
4
5
6
7
8
9
10
11
function debounce(method, time) {
    let timeout
    return function() {
        let that = this
        clearTimeout(tiimeout)
        timeout = setTimeout(function() {
            method.apply(that, arguments)
        }, time)
    }
    
}

适用情况：

  1. search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
  2. window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

节流

在固定n秒内只触发一次事件
两种实现方法：

  1. 事件戳
  2. 定时器

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

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
function timestamp(func, waitTime) {
    var previous = 0
    var now
    return function () {
        now = +new Date();
        var that = this
        if(now - previous > waitTime) {
            func.apply(that, arguments)
            previous = now
        }
    }

}

function timer(func, waitTime) {
    var timeout;
    var previous = 0;

    return function() {
        var that = this;
        var args = arguments;
        if (!timeout) {
            timeout = setTimeout(function(){
                timeout = null;
                func.apply(that, args)
            }, waitTime)
        }

    }
}

适用场景

  1. 鼠标不断点击触发，mousedown(单位时间内只触发一次)
  2. 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断