Hello小伙伴们,因为Ajax绕去http了几天,今天又回到了JS,今天要为大家介绍的是防抖和节流,听起来就很厉害的样子吧~想必大家在生活中也会经常干这种事情,比如在浏览一个网站的时候,要点击一个按钮,当这个点击动作没有做出反应的时候,用户便会一直不停的按,又或者再有滚动条的页面,不断上下滚动鼠标等等,都会造成不断触发事件甚至不断发送请求,为了防止这个就要采用防抖和节流的方法了。
同样是解决快速连续触发、不可控高频触发,防抖和节流又分别是什么呢,有什么区别呢?让我们一同看看吧~
防抖
多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行。对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时。(这就是个小傲娇,我执行完就是要等n秒再执行,你再按我再等n秒)
代码语言:javascript
复制
代码语言:javascript
复制
function debounce(fn,time) {
let timer;
return function () {
let self = this;
timer && clearTimeout(timer);
timer = setTimeout(function (...args) {
fn.apply(self,args);
},time);
}
}
代码语言:javascript
复制
节流
触发函数事件后,短时间间隔内无法连续调用,只有上一次函数执行后,过了规定的时间间隔,才能进行下一次的函数调用。对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时。(说白了就是一直在跑,只不过一定时间就能跑一次,这不就节流了嘛~)
代码语言:javascript
复制
function throttle(fn, time) {
let timer,start;
return function func(...args) {
let self = this;
let now = Date.now();
if(timer){
clearTimeout(timer);
}
else if(now - start >= time){
fn.apply(self, args);
start = now;
}else {
timer = setTimeout(function () {
func.apply(self, args);
}, time);
}
}
}
今天的内容就到这里啦,总的来说呢,防抖就是合并多次触发操作,节流就是保证一段时间事件就被触发一次,记住了吗~喜欢兔妞的文章请关注+右下角点击好看哟,越点越好看~~么么哒!!!