防抖和节流简单效果

伦苏ᝰ

已于 2022-06-29 11:11:13 修改

阅读量128

点赞数

文章标签：大数据 javascript 前端面试 html

于 2022-06-29 11:09:03 首次发布

本文链接：https://blog.csdn.net/qq_54646196/article/details/125516572

版权

本文探讨了防抖和节流两种 JavaScript 优化技术的区别，并通过实例展示了它们在验证码倒计时场景中的应用。防抖技术确保在设定时间间隔后仅执行一次操作，而节流则限制在特定时间内操作的频率。通过代码实现，可以清晰地理解这两种技术的工作原理及其在实际场景中的使用方式。

摘要由CSDN通过智能技术生成

防抖和节流的区别

防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

假设的运用场景

防抖：有一个验证码为60秒的时间，在这60秒内没点击一次就会重新从60秒重新计算，过了60秒才能触发执行。

节流：有一个验证码为60秒的时间，在这60秒内只能触发一次，重复点击也不会有任何反应，过来60秒才能触发执行。

这里是代码

<!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>
        <button class="btn1">防抖:<text>点击</text> </button>
        <button class="btn2">节流:<text>点击</text> </button>
        <button onclick="btn3()" class="btn3">普通点击</button>
    </div>
    <p class="p1">防抖触发次数：<text>0</text> </p>
    <p class="p2">节流触发次数：<text>0</text> </p>
    <p class="p3">普通点击次数：<text>0</text> </p>
    <script>
        // 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时
        // 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
        // 假设时间为60秒一次
        const btn1 = document.querySelector('.btn1')
        const btn2 = document.querySelector('.btn2')
        const btnt1 = document.querySelector('.btn1 text')
        const btnt2 = document.querySelector('.btn2 text')
        const p1t = document.querySelector('.p1 text')
        const p2t = document.querySelector('.p2 text')
        // console.log(btn1,btn2,btnt1,btnt2,p1t,p2t)

        // 防抖
        var time1 =60
        var falg1 = true
        btn1.onclick=function(){
            if(falg1){
                p1t.innerText=p1t.innerText*1+1
            }else{
                time1=60
                return
            }
             var r=setInterval(()=>{
                time1--
                btnt1.innerText=time1
                if(time1==0){
                    clearInterval(r)
                    time1=60
                    falg1=true
                    btnt1.innerText='点击'
                }
            },100)
            falg1=false
        }
        
        // 节流
        var time2 = 60
        var falg2 =true
        btn2.onclick=function(){
            if(falg2){
                p2t.innerText=p2t.innerText*1+1
            }else{
                return
            }
            var r =setInterval(()=>{
                time2--
                btnt2.innerText=time2
                if(time2==0){
                    clearInterval(r)
                    falg2=true
                    btnt2.innerText='点击'
                    time2=60

                }
            },100)
            falg2=false
        }

        // 普通事件
        function btn3(){
           var p3 = document.querySelector('.p3 text')
           p3.innerText=p3.innerText*1+1
        }
    </script>
</body>
</html>

这里是效果图