1. 首页
  2. IT资讯

js史上最精简!防抖节流(你的比我精简,算我输)。

前言


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

js史上最精简!防抖节流(你的比我精简,算我输)。

防抖,防止抖动?节流,节约流水??
于是乎百度了一波,终于弄懂。 就是,为了防止事件在短时间内被多次触发的两种解决方案。网上巴拉巴拉一堆说法, 总结:
防抖:你狂点按钮也没有,等你冷静下来事件才会触发。
节流:游戏里面的技能冷却功能。

好的,然后呢??

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

js史上最精简!防抖节流(你的比我精简,算我输)。

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

防抖:

 //例子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);         } } 
js史上最精简!防抖节流(你的比我精简,算我输)。

节流:

//时间戳版 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)         }     } }

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

js史上最精简!防抖节流(你的比我精简,算我输)。

,做为一个强迫症患者,这不能忍。
于是乎,我决定自己撸一个。:

js史上最精简!防抖节流(你的比我精简,算我输)。

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

js史上最精简!防抖节流(你的比我精简,算我输)。

防抖:

    let time2;     document.getElementById('防抖').onclick =     function () {         clearTimeout(time2);         time2=setTimeout(function () {             //做一些快乐的事情         },2000);     }; 
js史上最精简!防抖节流(你的比我精简,算我输)。

节流:

    let bool=true;         document.getElementById('节流').onclick = function () {         if(bool){             //做一些开心的事情             bool=false;             setTimeout(()=>{                 bool=true             },2000)         }     } 

原作者姓名:郑掌声
原出处:掘金
原文链接:js史上最精简!防抖节流(你的比我精简,算我输)。 – 掘金

原文始发于:js史上最精简!防抖节流(你的比我精简,算我输)。

主题测试文章,只做测试使用。发布者:玩家L-,转转请注明出处:http://www.cxybcw.com/22615.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code