| JavaScript, 函数防抖

函数防抖（debounce）

1. 什么是函数防抖（debounce）

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

2. 生活中的例子

如果有人进电梯（触发事件），那电梯将在5秒钟后关闭（执行事件监听器），这时如果又有人进电梯了（在5秒内再次触发该事件），我们又得等5秒再关闭（重新计时）。

3. 函数防抖的应用场景

  1. 给按钮加函数防抖防止表单多次提交。
  2. 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。
  3. 判断scroll是否滑到底部，滚动事件+函数防抖

总的来说，适合多次事件一次响应的情况。

4. 防抖代码

下面给大家看一个防抖的代码，在事件被触发1秒后再执行回调，如果在这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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>防抖节流</title>
    <style>
    #container{
        height: 200px;
        width: 100%;
        background: rebeccapurple;
        text-align: center;
        font-size: 30px;
        color: #fff;
    }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
    // 防抖
    const container = document.getElementById("container");
    function debounce(fn,wait,immediate){    // immediate默认是一个false，就是一个先后执行的问题
        let timer;
        return function(event){
            clearTimeout(timer);
            let _this = this;
            if(immediate){
                let isCall = !timer;
                timer = setTimeout(function(){
                    timer = null;
                },wait);
                if(isCall){
                    fn.apply(_this,[event]);
                }
            }else{
                timer = setTimeout(function(){
                fn.apply(_this,[event])
                },wait);
            }
        }
    }
    function show(e){
        this.innerHTML = e.clientX;
    }
    container.onmousemove = debounce(show,1000,false);
    </script>
</body>
</html>