防抖和节流 - 技术栈

防抖和节流

BittersweetYao2024-04-04 19:08

防抖（debounce）和节流（throttle）是两种常用的优化高频触发事件的方法。

防抖：当持续触发事件时，一定时间段内没有再触发事件，函数才会执行一次，如果在这个时间段内又触发了事件，则会重新开始延时。常用于输入框搜索、滚动加载等场景。

节流：当持续触发事件时，保证一定时间段内只触发一次事件处理函数。常用于滚动监听、窗口大小改变等场景。

防抖：

通俗来说就是我输入一个a后再规定时间内又输入一个a，第二输入触发的时候会删除上一次的定时器，所以只会执行第二次的aa

js 复制代码

// 防抖函数
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      func.apply(context, args);
    }, wait);
  };
}

节流

通俗来说就是我输入第一个a后，在a的定时器结束之前，后续所以的输入触发我全都不管

js 复制代码

// 节流函数
function throttle(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    if (!timeout) {
      timeout = setTimeout(function() {
        timeout = null;
        func.apply(context, args);
      }, wait);
    }
  };
}

触发他们

html 复制代码

<style>
  html{
    height: 500vh;
  }
</style>
<body>
  
</body>
<script src="./debounce.js"></script>
<script src="./throttle.js"></script>
<script>
  // 防抖示例
const debouncedSearch = debounce(function() {
  console.log('防抖搜索');
}, 500);
window.addEventListener('scroll', debouncedSearch);

// 节流示例
const throttledScroll = throttle(function() {
  console.log('节流行为');
}, 500);
window.addEventListener('scroll', throttledScroll);

</script>