ES6防抖及节流的方法

小华0000

已于 2024-06-30 08:26:56 修改

阅读量273

点赞数 9

文章标签： javascript 开发语言 ecmascript

于 2024-06-29 20:43:53 首次发布

本文链接：https://blog.csdn.net/xiaohua0708day/article/details/140070252

版权

ES6提供了防抖函数和节流函数来控制函数的执行频率。

1. 防抖函数（Debounce）：在一定时间内，只执行最后一次触发的函数。

function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

使用示例：

function handleInput() {
  console.log('Input changed');
}
 
const debouncedHandleInput = debounce(handleInput, 500);
document.getElementById('input').addEventListener('input', debouncedHandleInput);

2. 节流函数（Throttle）：在一定时间内，固定间隔执行函数。


function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}

使用实例：

function handleScroll() {
  console.log('Scrolling');
}

const throttledHandleScroll = throttle(handleScroll, 500);
window.addEventListener('scroll', throttledHandleScroll);

这两个函数可以帮助我们优化一些需要控制函数执行频率的场景，比如输入框输入验证、滚动事件处理等。