js函数防抖和节流的区别

函数防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。例如游戏角色放技能被打断了，然后重新释放技能，重新计算释放时间。
函数节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。就相当于游戏角色有霸体释放技能无法被打断。3秒一个技能，不管中间发生了什么。

防抖函数

1
2
3
4
5
6
7
8
9
10
11
function debounce(fn, delay) {
    var timer = null;
    return function() {
        clearTimeout(timer);
        var that = this,
            args = arguments;
        timer = setTimeout(function() {
            fn.apply(that, args)
        }, delay)
    }
}

一般用于input或者srcoll事件上。输入框搜索防止输入过快向后端发很多个请求，就是限制多长时间才能执行一次。重复操作会重新计算时间。

节流函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function throttle(fn, delay) {
    var timer = null,
        flag = false;
    return function() {
        if (flag) {
            return
        } 
        flag = true
        var that = this,
            args = arguments;
        timer = setTimeout(function() {
            clearTimeout(timer);
            flag = false
            fn.apply(that, args)
        }, delay)
    }
}

一般用于mousemove或者resize事件上，避免触发N次事件，限制多少毫秒内只能执行一次，提高性能。

demo

https://jsbin.com/budazewure/edit?html,console,output