前端笔试题之手写防抖节流

这个在线下笔试还是挺常见的，不过我看春招笔试题几乎没遇到过。实际开发中用的也多，所以学了不亏。将他们运用在一些高频事件的优化上能有很大的性能提升。

1. 防抖（debounce）

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

常用于监听keyup等，比如在实现一个根据输入字会动态显示在下方的搜索内容的输入框，如果不使用防抖的话，每次keyup或者change时都会进行一次请求，会对服务器造成很大的压力。

先来看一下最简单的实现代码：

上面的方法存在两个问题

1. timer暴露在外，会对全局造成污染

2. fn如果要传参需要在debounce那里传入，虽然可以使用arguments，但不是很好。

那么针对以上的问题完善后：

在外层使用函数包起来解决全局污染问题，同时使用第二层函数传参，解决函数传参问题。

最后再优化下第一次调用无法立即执行的问题

2. 节流（throttle）

每隔一段时间，只执行一次函数。

我个人比较喜欢在监听resize时使用。

如果使用的是rem等，那就会导致浏览器一直在重绘，会造成很大消耗。在使用throttle后在一段时间内只执行一次，将N次变为一两次，很大的减少了浏览器损耗。但常规的话是用在按钮重复点击的情况下，保证一段时间内重复点击按钮只会触发一次并且不是最后一次点击等。

来看下的实现方法（常见的是使用时间戳，所以这里不会展示使用定时器的节流）：

优化下，让监听停止后最后一次执行，使用定时器做最后一次延迟执行。

不足之处，麻烦指出，谢谢！