当前位置：首页 > news >正文

Web前端防抖与节流的那些事

news 来源：原创 2024/5/3 12:56:44

防抖与节流：

这是前端面试中比较常见的一个问题，可能会让你现场手写，其实说白了，节流和防抖就是用来控制某些函数的调用频率。因为有时候我们一个函数可能在短时间内会被触发多次，但是每次触发都发送一次请求的话就没有必要，所以我们要通过防抖与节流来控制。

防抖：

防抖就像是PK赛里的待定区，下一个待定的人会把上一个待定的人踢出局，换句话说，一个函数在短时间内被调用多次，只会执行最后一次（划重点）

下面是我写的一个demo来帮助大家理解一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div style="text-align:center;">
        <button id="btn1" style="height:50px;width:100px;font-size: 20px;">按钮1</button>
    </div>
    

    <script>
    	//防抖
        let time1;
        document.getElementById('btn1').onclick =
        function () {
            clearTimeout(time1);
            time1=setTimeout(function () {
                alert("我是按钮1");
                 console.log(time1);
            },2000);
        };
    </script>
</body>
</html>

解析：在这个例子中，我们可以看到当我们多次点击按钮的时候，只会执行最后一次的点击事件，clearTimeout是用来清除setTimeout的定时事件，一定要放在setTimeout的前面，因为当我们第一次点击按钮时，setTimeout函数的返回值是1，点击一次加一次，这个返回的数值是setTimeout函数的id，我们也是通过这个返回的数值（也就是id），从而使用clearTimeout来取消这一次的触发的。执行过程是这样的：当我们点击一次返回数值是1，然后我们又接着马上点击了一次，在第二次执行函数的过程中，首先clearTimeout把刚才数值为1的setTimeout事件取消掉了，然后执行数值为2的setTimeout事件，从而实现了防抖功能。

节流：

节流就像是一个看门大爷，每一段时间内它只会放一个人进去。换句话说，节流的意思就是函数在一段时间内的多次调用，仅第一次有效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="text-align:center;">
        <button id="btn1" style="height:50px;width:100px;font-size: 20px;">按钮1</button>
    </div>
    
    <script>
        //节流
        let bool=true;
        document.getElementById('btn1').onclick = function () {
        if(bool){
            alert("你好呀");
            bool=false;
            setTimeout(()=>{
                bool=true
            },2000)
        }
    }
    </script>
</body>
</html>