防抖和节流

lodash.com/docs#deboun…

可以直接下载js压缩包，里面提供了现成的防抖和节流的函数api

_.throttle 和 _.debounce，它很像setTimout的升级版

我们来看下用setTimout实现的一段代码：

 {" class="hljs var timer$(window).on("click", () => {">
  if(timer) {
    clearTimeout(timer)
  }

timer = setTimeout(() => {
  // ...
}, 500)
})

通过上面这段代码，可以防止反复点击窗口反复执行同一个函数。这个方法被称为“防抖”。使用_.debounce可以更优雅的实现：

$(window).on("click", _.debounce(() => {
  // ...
}, 500))

明显减少了非常多的代码。但是上面的这种方法会有一个问题，如果在500毫秒内一直点击，那么函数永远只会执行一次，点击不停止，函数就不会再执行。一般来说不会有这种情况出现，但是有的时候确实需要有这种机制：在不断点击的时候，如果距离上次执行函数超过了500毫秒，那么就可以再执行函数一次。

我们再来看_.throttle又是什么情况：

var flag = false

$(window).on("click", () => {
  if(flag) return
  flag = true
  // ...
  setTimeout(() => flag = false, 500)
})

上面这段代码通过一个flag变量来记录当前的点击状态，第一次点击之后会执行动作，但是500毫秒内再点击不会执行，直到过了500毫秒，再点击就有效，如此循环下去。

简便的写法是：

$(window).on("click", _.throttle(() => {

  // ...
  
}, 500))

这种方法会让第一次点击之后500ms之后的点击再生效。这种方法被称为“节流”。

从上面可以看出来，_.throttle 和 _.debounce的区别：

虽然在等待时间内函数都不会再执行，但_.throttle在第一次触发后开始计算等待时间，_.debounce在最后一次触发之后才计算等待时间（最后一次在等待时间范围内）。