如何理解js中的函数节流和防抖

比如：浏览器窗口的变化 resize事件，元素的鼠标悬浮 mouseover事件，多数据页面的滚动 scroll事件等等。这些事件处理不当，高频触发回调函数过重，很容易导致浏览器的卡顿，假死现象，当然了，特别是针对IE。针对这类情况，通常使用函数节流和函数防抖对其进行优化。

函数节流（throttle）

连续触发事件但是在指定时间 n 秒内只执行一次函数，即 2n 秒内执行 2 次，如字面意思，会稀释函数的执行频率

var canRun = true
document.getElementById('xxx').onscroll = function(){
  if(!canRun){
    return 
  }
  canRun = false
  // do something
  console.log('doing...')
  setTimeout(() => {
    canRun = true
  }, 300);
}

以上是一个监听页面元素滚动的示例代码，第一次滚动时可以执行额外操作，如果300ms之内持续滚动了，此时变量canRun值为false不会继续执行操作，只有等300ms后重置canRun为true了才能继续执行操作。

函数防抖（debounce）

段时间内多次触发同一事件，只执行一次

var timer = null
document.getElementById('xxx').onscroll = function(){
  timer && clearTimeout(timer)
  timer = setTimeout(() => {
    // do something
    console.log('doing...')
  }, 300);
}

以上依然是一个监听页面元素滚动的示例代码，首次触发滚动会生成一个延时器，300ms 以后执行操作，如果还未到 300ms 又触发了一次则清空定时器，重新计时，即最后一次触发后停留超过 300ms 后才会执行操作。