定时器:
在javascript高级程序设计里面有讲到,重复的定时器(setInterval)会有一些问题:(Javascript高级程序设计第三版:611页)
1.某些定时器会被跳过
2.定时器之间的间隔会比预期的时间要短
原因在于定义定时器所在的主函数运行时间过长,所以在选用定时器的时候,尽量不要选用setInterval,可以使用setTimeout连续设置,或者也可以每次都清除当前setInterval的定时器,重新设定新的定时器(有点绕)。
函数防抖:(Javascript高级程序设计里也有描述,不过书中概念是节流)
防抖的原理:你尽管触发事件,但是我一定在事件触发 n 秒后才执行,如果你在一个事件触发的 n 秒内又触发了这个事件,那我就以新的事件的时间为准,n 秒后才执行,总之,就是要等你触发完事件 n 秒内不再触发事件,我才执行,真是任性呐!(JavaScript专题之跟着underscore学防抖)
总结成一句话就是:
n s内最后一次触发这个事件的用户操作才使有效的。
适合多次事件最后一次响应的情况
应用场景:
给按钮加函数防抖防止表单多次提交。
对于输入框连续输入进行AJAX验证时,用函数防抖能有效减少请求次数。
判断scroll是否滑到底部,滚动事件+函数防抖
window的resize事件避免频繁被加载
函数节流
函数节流的原理:类似水管的水流调控,在一定时间内只会流一定的水,一段时间内某个操作只会触发一次
适合多次事件被频繁触发时按指定的间隔响应的情况
应用场景:
搜索联想
鼠标位置的计算
滚动条避免用户过快移动
函数节流和防抖对比
throttle 节流
搜索联想
判断是否滚动到了底部(每隔一段时间判断一次)
debounce 防抖
搜索验证
判断是否滚动到了底部(只有用户不再滚动了才判断是否滚动到了底部)