有关js节流和防抖

原创于 2020-05-14 16:42:00 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

javascript 专栏收录该内容

21 篇文章

订阅专栏

本文深入探讨了前端开发中节流(throttle)与防抖(debounce)的技术原理及应用场景，通过实例展示了如何使用这两种技术优化事件响应，提高用户体验。

节流

节流可以控制事件触发的频率放到我们的函数事件里面说就是可以让事件触发变慢，比如说事件触发可以让它在每一秒内只触发一次

防抖

防抖就是可以限制事件在一定时间内不能多次触发，比如说持续按点击按钮，一顿操作，不加防抖的话也会跟着一顿触发。但是一旦加了防抖，无论你点击多少次，他都只会在你最后一次点击的时候才执行

例子结合防抖和节流

<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><button onclick="res()">click</button></div>
    <script>
      function click() {
        console.log("!2313");
      }
      function debounce(fn, del) {
        let time = "";
        return function () {
          time && clearTimeout(time);
          time = setTimeout(() => {
            fn.apply(this, arguments);
          }, del);
        };
      }
      let res = debounce(click, 1000);
    </script>
  </body>
</html>