全网最易懂的防抖和节流

最新推荐文章于 2024-07-20 23:54:17 发布

爪洼守门员

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量130

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_50361560/article/details/139870575

版权

防抖函数：

在规定时间内只执行一次函数，如果在规定时间内触发多次，按最后一次触发的时间作为起始时间来延迟执行函数。

使用示例：

假设我们有一个输入框，用户输入时我们想要执行一个搜索操作，但不希望在每个字符输入时都进行搜索，而是希望用户停止输入后等待一段时间再执行搜索操作。可以这样使用防抖函数：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Debounce Example</title>
</head>
<body>
  <input type="text" id="searchBox" placeholder="Type to search..." />
  <script>
      //防抖函数
    function debounce(callback, delay) {
      var t = null;
        //返回匿名函数
      return function () {
        //清除定时器
        clearTimeout(t);
        //设置一个新的定时器，在 delay 毫秒后执行 callback 函数。
        t = setTimeout(callback, delay);
      };
    }

    function search() {
      console.log('Search query:', document.getElementById('searchBox').value);
    }

    const debouncedSearch = debounce(search, 300);

    document.getElementById('searchBox').addEventListener('input', debouncedSearch);
  </script>
</body>
</html>

节流函数：

在规定时间内以第一次触发时间开始，到规定时间结束，这期间只执行一次函数，如果中途有其它的触发事件，则忽视。用于限制函数的执行频率。

使用示例：

多次点击按钮时，在2s内只执行一次的功能，我们可以使用节流函数来限制按钮点击事件的执行频率。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Throttle Button Click</title>
  <style>
    #log {
      font-family: Arial, sans-serif;
      padding: 20px;
      border: 1px solid #ccc;
      height: 200px;
      overflow: auto;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <button id="throttleButton">Click Me</button>
  <div id="log"></div>
  <script>
    // 节流函数实现
    function throttle(callback, delay) {
      let lastCall = 0;
      return function (...args) {
        const now = Date.now();
           //表示自上次回调执行以来，已经经过了至少 delay 毫秒。因此，可以执行回调函数。
        if (now - lastCall >= delay) {
          lastCall = now;
          callback.apply(this, args);
        }
      };
    }

    // 按钮点击事件处理函数
    function handleClick() {
      const logDiv = document.getElementById('log');
      logDiv.innerHTML += `Button clicked at ${new Date().toLocaleTimeString()}<br>`;
      logDiv.scrollTop = logDiv.scrollHeight;
    }

    // 通过节流函数包装点击事件处理函数
    const throttledClick = throttle(handleClick, 2000); // 2秒节流时间

    // 绑定按钮点击事件
    document.getElementById('throttleButton').addEventListener('click', throttledClick);
  </script>
</body>
</html>