Java教程

【JavaScript】之防抖节流的实现

本文主要是介绍【JavaScript】之防抖节流的实现，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

防抖

防抖，即为防止抖动，避免将一次事件误认为多次。

意思是当你提出多次事件请求时，只会响应最近一次的请求。

以点击按钮实现1s后盒子宽度增大的效果为例，当我们不停点击按钮时，只会执行最后一次请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="btn1">防抖</button>
<div id="box1"></div>

<script>
    let btn1=document.getElementById("btn1")
    let box1=document.getElementById("box1")

    let timer1;
    
    btn1.onclick=function(){
        if(timer1){
            clearTimeout(timer1);
        }
        timer1=setTimeout(()=>{
            let num=box1.offsetWidth;
            box1.style.width=num+20+"px";
        },1000)
    }

</script>
</body>
</html>

其实可以看出，防抖重在清零，当timer不为null或undefined时提出请求，就clear掉timer，再生成一个timer。

节流

节流，即为节省流量，对提出的请求进行限流。

意思是当你在请求执行的时间范围内提出多次请求时，只会响应最开始提出的请求。

以点击按钮实现1s后盒子宽度增大的效果为例，当我们在请求执行的时间范围内不停点击按钮时，只会执行最开始提出的那次请求：

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="btn2">节流</button>
<div id="box2"></div>

<script>
    let btn2=document.getElementById("btn2")
    let box2=document.getElementById("box2")

    let timer2;
    
    btn2.onclick=function(){
        if(!timer2){
            timer2=setTimeout(()=>{
                timer2=null;
                let num=box2.offsetWidth;
                box2.style.width=num+20+"px";
            },1000)
        }
    }

</script>
</body>
</html>

可以看出，节流重在加锁，当timer不为空或undefined时，就不产生任何动作，当该请求执行结束后，将timer设置为null。

这篇关于【JavaScript】之防抖节流的实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航