函数的防抖和节流

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

应用场景：节流和防抖的核心其实就是限制某一个方法被频繁触发，
比如说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);