理解js中的防抖与节流

理解js中的防抖与节流

防抖（debounce）

• 概念：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。
• 举例：电脑一段时间（假设10分钟）不操作之后会自动息屏，当你在10分钟只能操作了电脑，那么这个息屏时间会重新计算（重新从10分钟倒计时）。
• 应用场景：搜索框检索，当用户在不停的输入内容时，此时不发送ajax请求，只有当用户在输入完内容后的一段时间后（一般是300ms），才发送请求，好处是能降低服务器的压力。

function debounce(fn, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout !== null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, wait);    
    }
}

节流（throttle）

• 概念：当持续触发事件时，一定时间段内，该事件处理函数只会执行一次，如果设定的时间到来之后，才会再一次触发处理函数。如下图，持续触发scroll事件时，每1000毫秒执行一次handle函数。
• 举例：当监听页面的滚动事件时，我们只需要某个函数每5秒执行一次。
• 应用场景：计算鼠标移动距离。

function throttle(fn, gapTime) {
  let _lastTime = null;

  return function () {
    let _nowTime = + new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      fn();
      _lastTime = _nowTime
    }
  }
}

let fn = ()=>{
  console.log('boom')
}