前言

昨天发了有关防抖的文章,很多人都问为啥节流不一起写了呢?这当然是因为昨天那个是上实验课摸鱼写的,节流不没摸出来嘛,嘿嘿。

不过不要慌,节流,它来了!

个人理解:节流的作用与防抖相似,都是为了限制事件的频繁触发。

如何实现节流

实现节流,就要先了解节流的原理。

节流就是,在一定的时间内,只执行一次事件。

或者说是,每隔一段时间,只执行一次事件。

要与防抖做一下区分哦~

防抖是,不管你触发了几次,我只看你最后触发的那一次,并且在若干时间后去执行此次事件。

我了解到的节流,有两种方式,分别是时间戳定时器

那么我们来实现一下看看吧~

时间戳

使用时间戳,当触发事件的时候,我们记录当前的时间戳,然后减去之前记录的时间戳(最一开始值一定不要忘了设为 0 ),如果大于设置的时间周期(也就是那个间隔的时间段),就执行函数,然后更新时间戳为当前的时间戳,如果小于,就不执行。

看完是不是觉得很简单?那我们来写一下。

具体的例子还是使用防抖的那个,懒得再写一个啦,嘿嘿~ 将防抖函数换成节流就可

防抖文章链接:都2021年了,不会还有人不知道防抖吧?

1
2
3
4
5
6
7
8
9
10
11
function throttle(todo, time) {
var pre = 0;
return function() {
var now = +new Date();
var that = this;
if (now - pre > time) {
todo.apply(that);
pre = now;
}
}
}

使用的话还是跟之前相同:

1
btn.onclick = throttle(shake,3000);

为什么设置3000,当然想让效果看起来明显一些,下面来看看效果吧:

好了好了,别在心里数123了,我们接着往下来。

定时器

当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行,直到定时器执行,然后执行函数,清空定时器,这样就可以设置下个定时器。

上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
function throttle(todo, time) {
var timeout,that;
return function() {
that = this;
if (!timeout) {
timeout = setTimeout(function(){
timeout = null;
todo.apply(that)
}, time)
}

}
}

看看效果:

可以看出,它是过了3s才生效的,但是不知道为什么,这种方式给我的体验感不是很好,可能是因为不是点击的下一刻就有了反馈吧~

这块要加上一个过渡动画,是不是会好很多?

比较

既然有两种方法,那就要说一下他们的区别。

第一种:在例子中可以清楚的看到,点击触发后立即有反馈(执行第一次),连续触发直到过了等待时间才会进行下一次执行,停止触发就不会执行。

第二种:过了等待时间才会执行第一次,停止触发还会执行一次。

在网上看到了这样的形容词:有头无尾,和无头有尾,是不是很形象。

最后

啊,终于结束了!还是那句话,可能我想到的或者写的不是很完善,希望大家能够指出,我会及时更正哒。

要是以后的我觉得某处可以优化,也会回来更新的!