javaScript 防抖和节流

防抖

事件触发时，不要马上执行动作，而是设定一个延迟时间（这个时间很短，比如 500ms）,在延迟时间内，再次触发事件，则重新计时。

 

典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

 

function debounce(func, delay) {
  let timer = null
  return () => {
    if (timer) {
      clearTimeout(timer)
      timer = setTimeout(func, delay)
    } else {
      timer = setTimeout(func, delay)
    }
  }
}

节流

事件触发后，规定在一个单位时间内，只能执行一次要执行的代码，如果在这个单位时间内多次触发函数，只有一次生效。

 

典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。

 

function throttle(func, delay) {
  let timer = null
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments)
        clearTimeout(timer)
        timer = null
      }, delay)
    }
  }
}