[JavaScript基础]定时器和函数防抖节流

定时器：

在javascript高级程序设计里面有讲到，重复的定时器（setInterval）会有一些问题：（Javascript高级程序设计第三版：611页）
1.某些定时器会被跳过
2.定时器之间的间隔会比预期的时间要短
原因在于定义定时器所在的主函数运行时间过长，所以在选用定时器的时候，尽量不要选用setInterval，可以使用setTimeout连续设置，或者也可以每次都清除当前setInterval的定时器，重新设定新的定时器（有点绕）。

函数防抖：（Javascript高级程序设计里也有描述，不过书中概念是节流）

防抖的原理：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行，真是任性呐!(JavaScript专题之跟着underscore学防抖)
总结成一句话就是：
n s内最后一次触发这个事件的用户操作才使有效的。

适合多次事件最后一次响应的情况

应用场景：

给按钮加函数防抖防止表单多次提交。
对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。
判断scroll是否滑到底部，滚动事件+函数防抖
window的resize事件避免频繁被加载

函数节流

函数节流的原理：类似水管的水流调控，在一定时间内只会流一定的水，一段时间内某个操作只会触发一次

适合多次事件被频繁触发时按指定的间隔响应的情况

应用场景：

搜索联想
鼠标位置的计算
滚动条避免用户过快移动

函数节流和防抖对比

throttle 节流
搜索联想
判断是否滚动到了底部（每隔一段时间判断一次）

debounce 防抖
搜索验证
判断是否滚动到了底部（只有用户不再滚动了才判断是否滚动到了底部）