实现函数的防抖与节流

函数防抖

如果一个事件被频繁触发多次，并且触发的时间间隔过短，则防抖可以使得对应的事件处理函数只执行最后触发的一次。

应用：搜索框搜索输入， 文本输入验证（手机号码，邮箱等），窗口大小resize（等窗口调整完成，再执行），滚动事件（等最后一次滚动再执行）等

function debounce(fn, delay, scope) {
    let timer = null;
    // 返回函数对debounce作用域形成闭包
    return function () {
        // setTimeout()中用到函数环境总是window,故需要当前环境的副本；
        let ctx= scope || this;
        // 如果事件被触发，清除timer并重新开始计时
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(ctx, arguments);
        }, delay);
    }
}

函数节流

如果一个事件高频触发，但在n秒内只会执行时间内一次

应用： 滚动事件scroll，（只要页面滚动就会间隔一段时间判断一次），搜索keyup等

function throttle(fn，delay，scope) {
 let valid= true; // 设置一个标记
 return function() {
  let ctx= scope || this;
  // 在函数开头判断标记是否为true，不为true则return
  if(!valid) return；
  // 立即设置为false
  valid= false;
  // 在setTimeout执行完毕后再把标记设置为true表示可以执行下一次循环了，当定时器没有执行的时候标记为false
  setTimeout(() => {
   fn.apply(ctx,arguments)
   valid= true;
  },delay)
 }
}