好程序员分享JS节流和防抖的区分和实现详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了好程序员分享JS节流和防抖的区分和实现详解,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2593字,纯文字阅读大概需要4分钟。
内容图文
![好程序员分享JS节流和防抖的区分和实现详解](/upload/InfoBanner/zyjiaocheng/834/97de7aaf53444f3591bc75632c037c11.jpg)
好程序员分享JS节流和防抖的区分和实现详解本文主要介绍的是关于JS中比较常用的函数:节流函数和防抖函数,从概念、使用场景到代码简单实现做了一个详细的区分。希望对你有所帮助。
在写JS时,这两个函数比较常见,有时候傻傻分不清用哪个,或者说知道代码要怎么写,但要说出它究竟是节流函数还是防抖函数时一脸楞逼。今天有一个同学分享了这两个的区分,我也来回顾一下,加深一下印象,以便日后用到时心里有底。PS:百度和谷歌搜索前几个介绍都是相反介绍,本文为原创,如有雷同纯属抄袭我的。
节流概念(Throttle)
按照设定的时间固定执行一次函数,比如200ms一次。注意:固定就是你在mousemove过程中,执行这个节流函数,它一定是200ms(你设定的定时器延迟时间)内执行一次。没到200ms,一定会返回,没有执行回调函数的。
主要应用场景有:scroll、touchmove
防抖概念(Debounce)
抖动停止后的时间超过设定的时间时执行一次函数。注意:这里的抖动停止表示你停止了触发这个函数,从这个时间点开始计算,当间隔时间等于你设定时间,才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间,则一定不会到回调函数那一步。
主要应用场景有:input验证、搜索联想、resize
节流实现
思路: 第一次先设定一个变量true,第二次执行这个函数时,会判断变量是否true,是则返回。当第一次的定时器执行完函数最后会设定变量为flase。那么下次判断变量时则为flase,函数会依次运行。
代码一:首次不执行
function throttle(fn,delay=100){
//首先设定一个变量,在没有执行我们的定时器时为null
let timer = null;
return function(){
//当我们发现这个定时器存在时,则表示定时器已经在运行中,需要返回
if(timer) return;
timer = setTimeout(()=>{
fn.apply(this,arguments);
timer = null;
},delay);
}
}
代码二:首次执行
function throttle2(fn,delay=100){
let last = 0;
return function(){
let curr = +new Date();
if(curr - last > delay){
fn.apply(this,arguments);
last = curr;
}
}
}
防抖实现
思路:首次运行时把定时器赋值给一个变量,第二次执行时,如果间隔没超过定时器设定的时间则会清除掉定时器,重新设定定时器,依次反复,当我们停止下来时,没有执行清除定时器,超过一定时间后触发回调函数。
代码一:首次不执行
function debounce(fn,delay=200){
let timer = null;
return function(){
if(timer) clearTimeout(timer);
timer = setTimeout(()=>{
fn.apply(this,arguments);
timer = null;
},delay);
}
}
代码二:首次执行
//code from http://caibaojian.com/throttle-debounce.htmlfunction debounce2(fn, delay = 200, atBegin = true) {
let timer = null, last = 0,during;
return function () {
let self = this, args = arguments;
var exec = function () {
fn.apply(self, args);
}
if (atBegin && !timer) {
exec();
atBegin = false;
} else {
during = Date.now() - last;
if (during > delay) {
exec();
} else {
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
exec();
}, delay);
}
}
last = Date.now();
}
}
内容总结
以上是互联网集市为您收集整理的好程序员分享JS节流和防抖的区分和实现详解全部内容,希望文章能够帮你解决好程序员分享JS节流和防抖的区分和实现详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。