有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

js节流防抖(js史上最精简!防抖节流)

javascript 炮渣日记 3周前 (11-19) 34次浏览 已收录 0个评论 扫描二维码

作为前端开发人员,相信大家对防抖和截流早已是十分熟悉了,初次听说这个玩意儿的时候我的第一反应是

js节流防抖(js史上最精简!防抖节流)

防抖,防止抖动?节流,节约流水??

于是乎百度了一波,终于弄懂。 就是,为了防止事件在短时间内被多次触发的两种解决方案。网上巴拉巴拉一堆说法, 总结:

防抖:你狂点按钮也没有,等你冷静下来事件才会触发。

节流:游戏里面的技能冷却功能。

好的,然后呢??

然后呢?当然是百度一下ctrl+c,ctrl+v完成功能点啊,自己写??不存在的

于是乎我找了一大堆案例总结几个例子大概是:

防抖:

//例子1
function debounce(fn,delay=200){
 let timer = null;
 return function(){
 if(timer) clearTimeout(timer);
 timer = setTimeout(()=>{
 fn.apply(this,arguments);
 timer = null;
 },delay);
 }
}
//例子2
function debounce(func, wait) {
 let timeout;
 return function () {
 let context = this;
 let args = arguments;
 if (timeout) clearTimeout(timeout);
 timeout = setTimeout(() => {
 func.apply(context, args)
 }, wait);
 }
}

节流:

//时间戳版function throttle(func, wait) {
 let previous = 0;
 return function() {
 let now = Date.now();
 let context = this;
 let args = arguments;
 if (now - previous > wait) {
 func.apply(context, args);
 previous = now;
 }
 }
}
throttle(count,1000);
//定时器版
function throttle(func, wait) {
 let timeout;
 return function() {
 let context = this;
 let args = arguments;
 if (!timeout) {
 timeout = setTimeout(() => {
 timeout = null;
 func.apply(context, args)
 }, wait)
 }
 }
}

看完这些代码:

什么玩意儿???这么麻烦的吗?防抖还好,大部分都能达到理想的效果,可是节流就没那么理想了。节流是技能冷却啊!就是要点一下立马触发,进入冷却,等冷却,结束继续能点。然而大多版本都是:点击等一会儿才触发,进入冷却。前面多了莫名的等待时间,不是立马触发的…….

做为一个强迫症患者,这不能忍。

于是乎,我决定自己撸一个。:

总结了一些例子,折腾了一下。自己版本的防抖节流就出炉啦!!

防抖:

 let time2;
 document.getElementById('防抖').onclick =
 function () {
 clearTimeout(time2);
 time2=setTimeout(function () {
 //做一些快乐的事情
 },2000);
 };

节流:

let bool=true;

document.getElementById(‘节流’).onclick = function () {

if(bool){

//做一些开心的事情

bool=false;

setTimeout(()=>{

bool=true

},2000)

}

}

测试了几下效果十分理想,代码精简,简单易懂。我觉得很ok!!

好啦,此次分享到这里!呀哈哈。以上内容如果有不足之处,望大家指点一二,如果有更精简的例子,更好的例子,望大家分享下。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址