防抖与节流

老是忘记这俩是怎么写的，记录一下。

防抖（debounce）

短时间内连续触发的事件，只响应最后一次触发的。

特点：有定时器的话，则删除该定时器，重新定时。

==> 案例：输入框

用户输入结束时才执行响应事件。

<input type="text" id="input1"/>

const input1 = document.getElementById("input1");

function debounce(fn, delay = 500) {
  let timer = null;

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

input1.addEventListener(
  "keyup",
  debounce(function (e) {
    console.log(e.target);
    console.log(input1.value);
  }, 600)
);

节流（throttle）

频繁触发的事件，一段时间内只执行一次。

函数执行一次后，在某段时间内暂时失效，过了这段时间再重新激活（有点像技能冷却）。

特点：有定时器的话，直接返回，在事件完成后重新计时。

==> 案例：拖拽

无论拖拽速度多快，都是每隔 100ms 执行一次响应事件。

<div id="div1" draggable="true"></div>

const div1 = document.getElementById("div1");

function throttle(fn, delay = 100) {
  let timer = null;

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

div1.addEventListener(
  "drag",
  throttle(function (e) {
    console.log(e.offsetX, e.offsetY);
  })
);