【JavaScript】之防抖节流的实现

最新推荐文章于 2024-07-26 20:46:33 发布

wait......

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量260

点赞数

分类专栏： js知识点总结文章标签： javascript 前端

本文链接：https://blog.csdn.net/qwerty053/article/details/121585783

版权

js知识点总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

防抖

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

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

以点击按钮实现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。

wait......

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【JavaScript】之防抖节流的实现

防抖防抖，即为防止抖动，避免将一次事件误认为多次。意思是当你提出多次事件请求时，只会响应最近一次的请求。以点击按钮实现1s后盒子宽度增大的效果为例，当我们不停点击按钮时，只会执行最后一次请求：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>
复制链接

扫一扫

专栏目录