概述
函数截流,就是将时间流水下连续执行的函数截断取某些时间点来执行,一般都是指间隔某个时间段,只有当上次函数执行后经过一定的时间间隔,才会进行下一次的该函数的调用。举个例子如实现拖拽效果,要一路监听mousemove
事件,或者监听scroll
的变化,resize
的变化,联想搜索的实现等这些场景都会用到截流函数。
实现
函数的截流一般要用到setTimeout
,比如要监听scroll
的变化;
|
|
多次拉动上下滚动条的时候,会触发多次此函数,我们要将该函数的调用尽量在某个时间间隔才去调用,怎么办呢;可以通过闭包返回一个函数,然后这个闭包函数在调用的时候就记录初始的时间点,然后每个timeout去执行一个函数;自己实现一个包装函数如下:
|
|
这个函数可以实现的效果是每次执行函数与上次执行的间隔为timeout,但是有个问题就是在最后一次的函数调用,可能会不满足与上次执行的时间间隔大于timeout,所以最后次会一直没有被调用,所以要加个判断,
|
|
这个实现,就是每次调用的时候,产生一个新的定时器,该定时器覆盖之前的那个定时器,起到的作用是:两次调用的时间差要一定是deley,如果连续调用的函数,每次的中间调用时间差都小于delay的话则该函数会一直处于不调用的状态;这个实现应该是防函数抖动的debounce
的效果
所以应该要有必须执行一次的时间;
|
|