谈一谈函数防抖与节流

函数防抖（debounce）

        假设我们网站有个搜索框，用户输入文本我们会自动联想匹配出一些结果供用户选择。我们可能首先想到的做法就是监听keypress事件，然后异步去查询结果。这个方法本身是没错的，但是如果用户快速的输入了一连串的字符，假设是10个字符，那么就会在瞬间触发了10次的请求，这无疑不是我们想要的。我们想要的是用户停止输入的时候才去触发查询的请求，这时候函数防抖可以帮到我们。

函数防抖是要在每完成等待某个时间后去执行某函数，而是要每间隔某个时间去执行某函数，避免函数的过多执行，参考一下underscore.js里相关函数的定义：_.debounce(function, wait, [immediate])，代码如下：

1

参数function是需要进行函数防抖的函数；参数wait则是需要等待的时间，单位为毫秒；immediate参数如果为true，则debounce函数会在调用时立刻执行一次function，而不需要等到wait这个时间后，例如防止点击提交按钮时的多次点击就可以使用这个参数。

所以，上面那个场景，我们可以这么解决：

2

函数节流（throttle）

函数节流就是让某个函数在上一次执行后，满足等待某个时间内不再触发此函数后再执行，而在这个等待时间内再次触发此函数，等待时间会重新计算。同样的，我们看下underscore.js里相关函数的定义：_.throttle(function, wait, [options])，代码如下：

3

PS：还有一种方法是可以加标识，比如在一个Ajax，外加一个isPending = true，在发送请求时变为false，在ajax的cb里在变为true，这种情况在某些特定场合也很好用哦～(￣▽￣～)(～￣▽￣)～。

参考原文：https://segmentfault.com/a/1190000002764479