函数节流是什么？怎么用？

最新推荐文章于 2024-07-20 14:49:34 发布

不列颠哈士奇

最新推荐文章于 2024-07-20 14:49:34 发布

阅读量255

点赞数 1

文章标签： javascript html5 html

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

版权

函数节流防抖 JavaScript 性能优化事件处理

关键词由CSDN通过智能技术生成

什么是函数节流？
函数节流是指一定时间内js方法只执行一次，
以点击事件为例，在一定时间内不管触发多少次点击事件都只会执行一次

为什么需要函数防抖？
为了减少一些时间的频繁调用，例如scroll(懒加载要记录滚动条的位置)、mousemove(鼠标移动)等等

看效果
下面是简单的样式便于观察

  .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 jieliu;

num.onclick=function(){
    if(pan){
        pan=false;
        jieliu=setTimeout(function(){
            nums++;
            num.innerHTML=nums;
            pan=true;
        },1000)
    }
}

不列颠哈士奇

关注

1
点赞
踩
0

收藏

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

什么是函数节流？函数节流是指一定时间内js方法只执行一次，以点击事件为例，在一定时间内不管触发多少次点击事件都只会执行一次为什么需要函数防抖？为了减少一些时间的频繁调用，例如scroll(懒加载要记录滚动条的位置)、mousemove(鼠标移动)等等看效果下面是简单的样式便于观察 .div{ width: 200px; height: 200px; color: red; font-size: 40px; .
复制链接

扫一扫