# js函数防抖、节流实现

描述：防抖和节流都是为了处理高频率触发事件的，但是在实现和结果上有些区别，导致使用场景也不大一样。

# 防抖（debounce）

防抖是延迟一定时间执行某种操作，若在延时期间重复执行该操作则重新计时，直到延迟时间足够才执行该操作。

# 简单实现：

function debounce(fn, delay = 100) {
    let timer;
    return function(...args) {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay)
    }
}
// 举例使用
let i = 0;
let fn = (str, i) => {
    console.log(str, i)
}
let run = debounce(fn, 100);
while (i <= 5) {
    run( `数字是：` , i);
    i++;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 适用场景

在注册某些网站时我们经常会发现用户名实时检查是否已存在，一般做法是当输入框change时或者keyup时就发请求去检查，这样做的不好之处在于当用户疯狂输入时，对服务器造成的压力可想而知；这个时候使用函数防抖，得到的效果将是当用户停止输入一定时间后，再向服务器请求检查，两者的差异想想就明白啦。

# 节流（throttle）

节流是指在一定时间内只执行一次某项操作，若在该时间内重复触发，则不响应。

# 简单实现：

function throttle(foo, time) {
    var p = false;
    return function() {
        if (p)
            return;
        p = true;
        clearTimeout(timmer);
        var timmer = setTimeout(function() {
            foo();
            p = false;
        }, time)
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 使用场景

图片轮播是再常见不过的页面效果了，图片前进后退的切换通常需要一个过渡时间，如果用户在过渡时间内再执行前进后退操作，问题就发生了，在这里使用节流，得到的效果是之后当切换过渡完成之后才响应用户的下一次操作，是不是效果更佳呢？