抖技术是一种非常有用的 JavaScript 技术,可以帮助我们优化用户界面的性能。

防抖是指在一个指定的时间内,如果同一个事件被触发多次,只执行最后一次事件。这对于一些频繁触发的事件非常有用,比如用户在输入框中输入文字、窗口大小调整等。

下面是一个简单的防抖函数实现:

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

这个函数接受两个参数:

• func：需要防抖的函数
• delay：防抖的延迟时间,单位为毫秒

使用时,可以像这样调用:

const handleResize = debounce(() => {
  console.log('Window resized');
}, 300);

window.addEventListener('resize', handleResize);

在这个例子中,当用户调整浏览器窗口大小时,handleResize 函数会被触发,但由于使用了防抖,只有在用户停止调整窗口 300 毫秒后,才会输出 ‘Window resized’。这样可以避免因为频繁触发而导致的性能问题。

防抖是一种非常实用的技术,可以广泛应用于各种 JavaScript 场景中。