重温前端之防抖节流/重绘回流

这两对没什么关系，只是想写在一起

一. 防抖

定义：一段时间内多次触发时，最后才进行执行

应用举例： 图片懒加载时的滚动

写法：

function debounce(fn, delay) {
  let timer = null;
  return function () {
    timer ? cleanTimeout(timer) : (timer = setTimeout(fn, delay));
  };
}

二. 节流

定义：执行过后，间隔一段时间才能执行（冷却）

应用举例：部分按钮

写法：

function throttle(fn, delay) {
  let flag = true;
  return function () {
    if (!flag) return false;
    flag = false;
    setTimeout(() => {
      fn();
      flag = true;
    }, delay);
  };
}

重绘

不影响布局，只是部分样式的改动，为重绘

回流

影响了布局，导致需要重新计算节点位置的，为回流