前言
昨天发了有关防抖的文章,很多人都问为啥节流不一起写了呢?这当然是因为昨天那个是上实验课摸鱼写的,节流不没摸出来嘛,嘿嘿。
不过不要慌,节流,它来了!
个人理解:节流的作用与防抖相似,都是为了限制事件的频繁触发。
防抖文章链接:不会还有人不知道防抖吧?
如何实现节流
实现节流,就要先了解节流的原理。
节流就是,在一定的时间内,只执行一次事件。
或者说是,每隔一段时间,只执行一次事件。
要与防抖做一下区分哦~ 防抖是,不管你触发了几次,我只看你最后触发的那一次,并且在若干时间后去执行此次事件。
我了解到的节流,有两种方式,分别是时间戳与定时器。
那么我们来实现一下看看吧~
时间戳
使用时间戳,当触发事件的时候,我们记录当前的时间戳,然后减去之前记录的时间戳(最一开始值一定不要忘了设为 0 ),如果大于设置的时间周期(也就是那个间隔的时间段),就执行函数,然后更新时间戳为当前的时间戳,如果小于,就不执行。
看完是不是觉得很简单?那我们来写一下。
代码语言:javascript复制具体的例子还是使用防抖的那个,懒得再写一个啦,嘿嘿~ 将防抖函数换成节流就可 防抖文章链接:不会还有人不知道防抖吧?
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;
}
}
}
使用的话还是跟之前相同:
代码语言:javascript复制btn.onclick = throttle(shake,3000);
为什么设置3000,当然想让效果看起来明显一些,下面来看看效果吧:
时间戳节流.gif
好了好了,别在心里数123了,我们接着往下来。
定时器
当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行,直到定时器执行,然后执行函数,清空定时器,这样就可以设置下个定时器。
上代码:
代码语言:javascript复制function throttle(todo, time) {
var timeout,that;
return function() {
that = this;
if (!timeout) {
timeout = setTimeout(function(){
timeout = null;
todo.apply(that)
}, time)
}
}
}
看看效果:
定时器节流.gif
可以看出,它是过了3s才生效的,但是不知道为什么,这种方式给我的体验感不是很好,可能是因为不是点击的下一刻就有了反馈吧~
这块要加上一个过渡动画,是不是会好很多?
比较
既然有两种方法,那就要说一下他们的区别。
第一种:在例子中可以清楚的看到,点击触发后立即有反馈(执行第一次),连续触发直到过了等待时间才会进行下一次执行,停止触发就不会执行。
第二种:过了等待时间才会执行第一次,停止触发还会执行一次。
在网上看到了这样的形容词:有头无尾和无头有尾,是不是很形象。
最后
啊,终于结束了!还是那句话,可能我想到的或者写的不是很完善,希望大家能够指出,我会及时更正哒。
要是以后的我觉得有地方可以优化,也会回来更新的! 关注我,我们一起学习进步吧!