js防抖与节流

原创 86184893 随笔 面试 226阅读 2019-02-26 16:24:17 举报

函数防抖
定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行。

原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时。

函数防抖的适用性:

通过上面的例子,我们知道我们可以通过函数防抖,解决了多次触发事件时的性能问题。

比如,我们在监听滚动条位置,控制是否显示返回顶部按钮时,就可以将防抖函数应用其中。

  但依然有些功能并不适用:

当我们做图片懒加载(lazyload)时,需要通过滚动位置,实时显示图片时,如果使用防抖函数,懒加载(lazyload)函数将会不断被延时,

只有停下来的时候才会被执行,对于这种需要实时触发事件的情况,就显得不是很友好了。

下面开始介绍函数节流,通过设定时间片,控制事件函数间断性的触发。

函数节流
定义:触发函数事件后,短时间间隔内无法连续调用,只有上一次函数执行后,过了规定的时间间隔,才能进行下一次的函数调用。

原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时。

总结

函数防抖:将几次操作合并为一此操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。

函数节流:使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复