JavaScript节流防抖_6.节流防抖-CSDN博客

本文链接：https://blog.csdn.net/yesir_mao/article/details/100982499

说明：此文章仅供参考和学习使用，转载请注明出处。
1.防抖：阻止一个函数在很短的时间间隔内连续调用。只有在上一次函数调用执行后达到规定的时间间隔，才能进行下一次调用，但要保证一个一个累计最小调用的时间。相当于将若干函数的调用，合并为在某个固定的时间间隔内的一次函数的调用,只要不是最后一次触发，就不异步执行请求。
应用场景： 函数节流一般用于，onresize，onscroll等短时间内会多次触发的事件。
实现原理： 当触发一个事件时，先用一次性定时器setTimeout让这个事件延迟一小段事件再执行。如果这个事件间隔内又触发了该事件，则clearTimeout清除原来的定时器，再setTimeout一个新的定时器重复以上步骤。
2.实现过程：为了方便大家理解，因此代码分为两部分，一部分为基础写法，一部分为重构后的写法，两种都是一样的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body style="height: 2000px;">
    <button id="btn">click me！</button>
    <script>
        var timer;      //用来存储计时器的编号
        window.onscroll = function() {
            // 基础写法
            if (timer == 'undefined') { //如果定时器的编号为undefined，那么说明此时的事件没有被触发，事件没有触发，则直接启动定时器
            timer = setTimeout( () => {
                console.log('发送ajax请求');
            }, 200)
            } else { 
                //否则，如果事件被触发，那么说明此时窗口的滚动事件已经被触发。说明此时有滚动事件在执行，而在计时器未达到等待的事件间隔内，我们现在又要让滚动事件
                // 重新执行。因此，首先我们需要清空已经存在的计时器，然后重新开启新的计时器。只有在计时器规定的事件内，没有新的事件重新被触发，那么此时才会
                // 触发计时器中的事件执行
                clearTimeout(timer);
                timer = setTimeout( () => {
                    console.log('发送ajax请求');
                }, 200)
            }
            //代码重构
            if (timer !== 'undefined'){
                clearTimeout(timer);
            }
            timer = setTimeout( () => {
                console.log('发送ajax请求')
            }, 200)
        }
    </script>
</body>
</html>

3.防抖效果如图：
为防抖前的效果：
在这里插入图片描述
随着滚动条的滚动，事件不停的执行。
防抖后的效果：

此时的效果为：当滚动滚动条结束时，才执行。
4.节流: 相比于防抖，节流就是让函数在特定时间内只执行一次。第一次发送请求后，只要响应没回来，就不能发送第二次请求。
**应用场景：**按钮的点击事件，为了防止用户不停点击按钮从而使请求不断被提交
**实现原理：**原理与防抖的原理类似，只不过是通过开关来控制，是否可以实现节流。开关默认是开启状态，当触发事件后，将开关关闭。开关关闭后，触发定时器，在规定的时间间隔内，获取到返回回来的响应之后，重新开启开关。
5.代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body style="height: 2000px;">
    <button id="btn">click me！</button>
    <script>
      // 函数节流：相比于防抖，节流就是让函数在特定时间内只执行一次。例如：按钮的点击事件，为了防止用户不停点击按钮从而使请求不断被提交
        // 第一次发送请求后，只要响应没回来，就不能发送第二次请求。
        var canClick = true;    //可以点击
        btn.onclick = function() {
            if(canClick) {  //如果按钮可以被点击
                canClick = false;   //防止按钮一直被点击
                console.log('发送ajax请求')
                var clickTimer = setTimeout( () => {
                    console.log('请求完成');   //执行的点击事件的内容
                    canClick = true;    //间隔200ms后，才能再次点击该按钮
                    clearTimeout(clickTimer);
                }, 2000);
            }
        }
    </script>
</body>
</html>

实现效果：
未开启节流之前：
在这里插入图片描述
没点击一次，btn提交一次请求。
开启节流效果之后：

每隔两秒之后，请求返回后才执行下一次点击事件，期间点击按钮触发的其他事件都未执行。
6.节流和防抖的区别：
防抖：只要不是最后一次触发，就不异步执行请求
节流：第一次发送请求后，只要响应没回来，就不能发送第二次请求。