防抖和节流

防抖-debounce 和 节流-throttle都是控制事件触发频率的手段，避免前端操作（输入框持续输入、onScroll...）时持续触发事件执行。区别在于，防抖在最后一次触发后执行，而节流是定期执行一次。

防抖

频繁触发事件时只在最后执行事件处理函数。比如输入框持续输入时并不执行处理函数，当x毫秒内没有输入时，才执行处理函数。

// 防抖，停止操作后才触发
function debounce(func, delay){
   let timeout;
   return function() {  // 封装事件监听触发的函数，这是一个闭包，共享变量 timeout
    clearTimeout(timeout);  //delay范围内触发时清除定时器，目标函数func不会执行
    timeout = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);  //delay毫秒后执行目标函数func
  }
}

element.onchange =debounce(func, 1000);  //设置1000秒未触发事件后才执行回调

节流

频繁触发事件时在一段时间内只执行一次事件处理函数。比如持续触发scroll事件时，并不持续执行处理函数，而是每隔x秒才执行一次。

// 节流，隔断时间触发
function throttle(func, delay){
  let run = true;  // 通过闭包定义一个共享开关，初始化为打开
  return function() {  // 封装事件监听触发的函数
    if (!run) {    // 开关关闭状态下触发事件不执行
       return;
    } 
    run = false; // 执行完（第一次触发）之后把开关关闭，设置delay毫秒之后执行目标函数
    setTimeout(() => {
        func.apply(this, arguments)
        run = true  // 定时器到间隔时间之后，执行函数，并把开关打开
    }, delay);
  }
}

element.onscroll = throttle(func, 1000); //设置1000秒执行一次