函数防抖是什么？怎么用？

最新推荐文章于 2024-07-29 13:58:45 发布

不列颠哈士奇

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量585

点赞数 1

文章标签：函数防抖前端开发性能优化 DOM操作事件处理

本文链接：https://blog.csdn.net/HusKiy/article/details/120641003

版权

什么是函数防抖？
函数防抖，就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n
秒内又触发了事件，则会重新计算函数延执行时间

为什么需要防抖？
前端开发过程中，有一些事件，常见的例如，点击事件，鼠标经过和离开事件等，
会被频繁触发（短时间内多次触发），
不做限制的话，有可能一秒之内执行几十次、几百次，
如果在这些函数内部执行了其他函数，尤其是执行了操作
DOM 的函数（浏览器操作 DOM，是很耗费性能的），
那不仅会浪费计算机资源，还会降低程序运行速度，
甚至造成浏览器卡死、崩溃。这种问题显然是致命的

先看效果

第一种是当点击的时候先触发点击事件，然后再怎么点击都不会再触发点击事件，只有在设置的时间间隔内结束点击再次点击才会继续触发

第二种是点击的时候只有在设置的时间间隔内结束点击时才会触发点击事件

这些是简单的样式便于直接观察

.div{
        width: 200px;
        height: 200px;
        color: red;
        font-size: 40px;
        font-weight: 700;
        margin: 30px auto;
        text-align: center;
        line-height: 200px;
        background-color: burlywood;
    }
<body>
    <div class="div">1</div>
</body>

这就是第一种的js
原理是第一次触发点击事件后进行”锁定“，只有不在设定时间内点击时才会”解锁“并触发点击事件

	var num=document.querySelector("div")
    nums=parseInt(num.innerHTML)
    pan=true;
    var diyi;
    var zuihou;
    
 num.onclick=function(){
        clearTimeout(diyi)
        if(pan){
            nums++;
            num.innerHTML=nums;
            pan=false;
        }else{
            diyi=setTimeout(function(){
                pan=true;
            },1000)
        }
    }

这是第二种的js
原理是第一次点击的时候就开始“上锁”了，所以怎么点击都没用，只有在给定时间外停止点击才会“解锁”并触发点击事件

	var num=document.querySelector("div")
    nums=parseInt(num.innerHTML)
    pan=true;
    var diyi;
    var zuihou;
    
num.onclick=function(){
        clearTimeout(zuihou)
        zuihou=setTimeout(function(){
            nums++;
            num.innerHTML=nums;
        },1000)
    }

不列颠哈士奇

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
函数防抖是什么？怎么用？

什么是函数防抖？函数防抖，就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n秒内又触发了事件，则会重新计算函数延执行时间为什么需要防抖？前端开发过程中，有一些事件，常见的例如，点击事件，鼠标经过和离开事件等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作DOM 的函数（浏览器操作 DOM，是很耗费性能的），那不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。.
复制链接

扫一扫