2、防抖和节流

最新推荐文章于 2025-08-01 15:01:36 发布

原创最新推荐文章于 2025-08-01 15:01:36 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6 #vue.js #node.js #html

每日一点专栏收录该内容

5 篇文章

订阅专栏

防抖：动作绑定事件，动作发生后一定时间后触发事件，在这段时间内，如果该动作又发生，则重新等待一定时间再触发事件。

例如用户频繁点击，只需要响应一次即可

节流：动作绑定事件，动作发生后一段时间后触发事件，在这段时间内，如果动作又发生，则无视该动作，直到事件执行完后，才能重新触发。

例如监听窗口resize和scroll事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
  <script>
    // 防抖 计时器
    function debounce (fn, delay = 500) {
      let timer = null;
     
      return () => {
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, arguments);
        }, delay);
      }
    }

    // 节流 计时器
    function throtte1(fn, delay = 500) {
      let timer = null;
      
      return () => {
        if(timer) return;
        timer = setTimeout(() => {
          fn.apply(this, arguments);
          timer = null;
        }, delay)
      }
      
    }

    // 节流 开关
    function throtte2(fn, delay = 500) {
      let isOk = true;
      return () => {
        if(!isOk) return;
        isOk = false;
        setTimeout(() => {
          fn.apply(this, arguments);
          isOk = true;
        }, delay)
      }
    }

    // 节流 时间差值判断
    function throtte3 (fn, delay = 500) {
      let pre = Date.now();
      return () => {
        let cur = Date.now();
        if(cur - pre > delay){
          setTimeout(() => {
            fn.apply(this, arguments);
            pre = Date.now();
          })
        }
      } 
    }


    let num = 1;
    let content = document.getElementById('content');

    function count() {
        content.innerHTML = num++;
    };
    content.onmousemove = throtte3(count, 1000);

  </script>
</body>
</html>