美文网首页
定时器和函数防抖节流

定时器和函数防抖节流

作者: 向布谷鸟说早安 | 来源:发表于2018-12-08 21:12 被阅读10次

定时器:

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

函数防抖:(Javascript高级程序设计里也有描述,不过书中概念是节流)

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

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

应用场景:

给按钮加函数防抖防止表单多次提交。
对于输入框连续输入进行AJAX验证时,用函数防抖能有效减少请求次数。
判断scroll是否滑到底部,滚动事件+函数防抖
未完待续

相关文章

网友评论

      本文标题:定时器和函数防抖节流

      本文链接:https://www.haomeiwen.com/subject/lilchqtx.html