JS防抖、节流

smile_hahahaxixi

已于 2022-04-12 11:28:18 修改

阅读量388

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2020-03-28 18:41:52 首次发布

本文链接：https://blog.csdn.net/smile_hahahaxixi/article/details/105166146

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

防抖

某事件触发时,延迟多长时间执行事件处理函数,若在延迟时间内用户再次触发了该事件,就清除上次的定时器,重新设置定时器,最近一次动作结束后,再执行事件处理函数.

<body>
  <button id="btn">点我</button>
  <script>
    const btn = document.getElementById('btn');
    btn.onclick = debounce(() => {
      console.log(1111);
    }, 2000)

    function debounce(fn, delay) {
      let timer = null;
      return function () {
        if (timer) clearTimeout(timer); // 如果timer存在，表示在指定时间内连续触发，则清除定时器
        timer = setTimeout(fn, delay)
      }
    }
  </script>
</body>

节流

第一次操作需执行一次事件处理函数，若之后持续操作，则每隔指定时间后执行一次事件处理函数。

    document.getElementById('btn').onclick = throttle(function(){
      console.log(1111);
    },2000)

    function throttle(fn,time){
      let nowTime = Date.now() //当前时间
      return function(){
        let lastTime = Date.now() // 当下点击的时间
        if(lastTime - nowTime >= time){
          fn()
          nowTime = lastTime // 将当前时间修改为执行事件处理函数时的时间
        }
      }
    }

smile_hahahaxixi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS防抖、节流

JS防抖代码某事件触发时,延迟多长时间执行事件处理函数,若在延迟时间内用户再次触发了该事件,就清除上次的定时器,重新设置定时器,最近一次动作结束后,再执行事件处理函数. <script> function debounce(fn, delay) { var timer = null; clearTimeout(tim...
复制链接

扫一扫

专栏目录