防抖和节流

防抖和节流都是前端为了控制用户的频繁交互，提供系统性能

防抖（debounce）：

定义：当事件持续触发时候，一定时间内没有在触发，该事件只会执行一次，如果一定事件内，时间不断发生，防抖会结束之前的时间，重新开始新的事件，从而重新开始延时。

适用场景：搜索、滚动加载事件

代码：

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



// 防抖示例
const debouncedSearch = debounce(function() {
  console.log('防抖搜索');
}, 500);
window.addEventListener('scroll', debouncedSearch);

节流：

定义：当事件持续触发时候，一定时间内没有在触发，该事件只会执行一次，如果一定时间内，事件不断发生，节流不会管新触发事件，只有等前面事件结束才会触发新的事件。

适用场景：滚动监听、窗口大小改变等

代码：

// 节流函数
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);
    }
  };
}



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