防抖与节流

最新推荐文章于 2022-12-14 22:53:05 发布

more_ro

最新推荐文章于 2022-12-14 22:53:05 发布

阅读量245

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/more_ro/article/details/120654503

版权

什么是防抖:

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。(只有最后一次生效,前面的会重置)

什么是节流:

当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发间隔小于既定值(设置的间隔时间)，函数节流会让这个函数每隔设置的时间才调用一次(减少事件触发的次数)

怎样设置防抖?
看下列一段简单的代码

<body>
    <button id="btn">点击</button>
    <script>
        //首先获取事件对象
        var btn = document.querySelector('#btn');
        //给按钮绑定一个点击事件
        btn.addEventListener('click', function () {
            //先清除定时器,这样每次触发点击事件的时候就会将前面未执行完成的定时器都清除
            clearTimeout(timer);
            //然后再次调用,这样就只会让最后一次点击事件生效
            times();
        })

        //创建一个定时器,设置时间为1.5s
        //创建一个全局的定时器 否则清除定时器的时候找不到会报错
        var timer = null;
        function times() {
            timer = setTimeout(function () {
        //将要执行的代码放到定时器里面,比如下列打印一个'hi'
                console.log('hi');
            }, 1500)
        } 
    </script>
</body>

最后测试,点击一次按钮,1.5s之后会打印'hi',当在一段时间内连续多次点击按钮,只会最后一次生效.

怎样设置节流阀?

//先声明一个状态flag
let flag = true;
//设置一个页面滚动事件
document.onscroll = function () {
//判断此时状态flag值是否为true,否则不会执行后续的代码
  if (flag) {
//状态为true时候会执行里面的代码,打印一个hi
  console.log('hi');
//同时将状态flag改为false,不让后续再执行触发事件里面的代码,相当于关闭了开关
  flag = false;
//设置定时器,时间定义为1s
  setTimeout(function () {
//1s之后将状态flag修改成true,这样就可以再次执行触发事件里面的代码,相当于打开了开关
//也就是说在这1s内任何操作都无法再执行里面的代码
   flag = true;
  }, 1000)
 }
}

最后,说说两者之间的区别吧