防抖和节流

防抖是防止抖动，即在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

防抖常用场景

搜索框输入查询，只需用户最后一次输入完，再发送请求

按钮提交，防止多次提交按钮请求

窗口大小Resize，只需窗口调整完成后，计算窗口大小。防止重复渲染。

图片懒加载，只需滚动到可视范围内，再发送请求加载图片。

监听滚动事件，只需判断用户停止滚动多久，再发送请求加载更多内容。

防抖函数

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

节流是控制事件发生的频率，即规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间再次触发，则会重新计算时间。

节流常用场景

鼠标不断点击触发，mousedown(单位时间内只触发一次)

监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

监听文本框输入值，用throttle来判断

监听滚动事件，用throttle来判断

监听鼠标移动，用throttle来判断

节流函数

function throttle(fn, delay) {
  let canRun = true;
  return function() {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, delay);
  };
}

防抖和节流的区别

防抖是将多次执行变为最后一次执行。

节流是将多次执行变成每隔一段时间执行。