节流和防抖

一、节流？

• 理解：在函数多次频繁触发时，函数执行一次后，只有大于设定的执行周期后才会执行第二次
• 场景：页面滚动（scroll）、DOM 元素的拖拽（mousemove）、抢购点击（click）、播放事件算进度信息
• 功能：节流函数在设置的delay毫秒内最多执行一次（简单点说就是，我上个锁，不管你点了多少下，时间到了我才解锁）

function buducion(fn, wait, maxTime) {
    let time = null
    let startTime = Date.parse(new Date);
    return function () {
      if (time !== null) {
        clearTimeout(time)
      }
      let curTime = Date.parse(new Date);
      if (curTime - startTime > maxTime) {
        startTime = curTime
        fn()
      } else {
        time = setTimeout(fn, wait)
      }

    }
  }
  // 执行函数
  function render() {
    console.log(Math.random())
  }
  window.addEventListener('scroll', buducion(render, 1000, 2000))

二、防抖

• 理解：在函数频繁触发是，在规定之间以内，只让最后一次生效
• 场景：搜索框实时联想（keyup/input）、按钮点击太快，多次请求（登录、发短信）、窗口调整（resize）
• 功能：防抖函数在被调用后，延迟delay毫秒后调用，没到delay时间，你又点了，清空计时器重新计时，直到真的等了delay这么多秒。
• 闭包

/*
   延时执行
   @param fn function
   @param wait number
   @return function
*/
function debounce(fn, wait) {
   var timeout = null;
   return function() {
       if(timeout !== null) clearTimeout(timeout);
       timeout = setTimeout(fn, wait);
   }
}
// 处理函数
function handle() {
   console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 500));

• 直接写

var timeout = null;
window.addEventListener('scroll', function() {
    if(timeout !== null) clearTimeout(timeout);
    timeout = setTimeout(function() {
        var scrollTop = this.scrollY;
        console.log(scrollTop);
    }.bind(this), 500);
});

三、节流和防抖的区别