函数的防抖和节流

目的：节约性能开销，避免多次频繁的触发业务逻辑造成页面卡顿。

应用场景：节流和防抖的核心其实就是限制某一个方法被频繁触发，
比如说 DOM 事件的监听回调，input的 keyup、keydown，window.scroll,window.resize 事件，按钮连续变态点击导致无限制发送接口请求等应用场景

防抖

一个需要频繁触发的函数，在规定的时间内，只执行最后一次，前面的触发不执行。(当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行)

原理

第一次调用函数创建一个定时器，指定的时间间隔后运行代码。第二次调用函数时，它会清除前一次的定时器并设置另一个。

let debounce = function(func, delay) {
  let timeout;
  return function() {clearTimeout(timeout);
    timeout = setTimeout(() => {func.apply(this, arguments);
    }, delay);
  };
};
let box = document.getElementById("app");
box.onmousemove = debounce(function(e) {box.innerHTML = `${e.clientX}, ${e.clientY}`;
}, 100);

节流

一个函数执行一次后只有大于设定的执行周期才会执行第二次。(指连续触发事件但是在 n 秒中只执行一次函数)

原理

用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳，这样循环下去

function throttle(func, delay) {
  let run = true;
  return function() {if (!run) {return;}

    run = false;
    setTimeout(() => {func.apply(this, arguments);
      run = true;
    }, delay);
  };
}

box.onmousemove = throttle(function(e) {box.innerHTML = `${e.clientX}, ${e.clientY}`;
}, 500);