JS的防抖和节流

Posted 2023-04-08

参考技术A

应用场景： input输入信息进行搜索，如果每敲一个字符就请求后台接口，给后台的压力太大了，所以做好防抖，即让程序只执行最后一次的事件。
为解决该问题，探索到了两个解决方案：

直接使用lodash工具库的debounce方法
参考网址： https://blog.csdn.net/qq_39139322/article/details/103295326

应用场景： 滚轮滚动触发事件频繁，加上延迟可低频触发
看过了上面闭包防抖的写法，下面闭包节流的写法也很好理解了~

前端的防抖和节流

 防抖和节流都是优化高频率执行js的方法

 

dom 结构

<button id ="jh">

　　123

</button>

 

js 结构

var jh =1 ;

var jhBt = document.getElementById("jh");

 

 防抖：只有等空闲时间才去执行，

 比如搜索框功能，如果快速一直按键，难道每输入一个键就去后台匹配然后渲染吗？等用户输入完整关键字在去后台匹配是不是性能更加优化。

 

jhBt.onclick = function(){

　　console.log( window.test ,"window.test");

　　// 每次点击，先清除上次定时器

　　if( window.test){

　　　　clearTimeout(window.test)

 

　　　}

　　window.test = setTimeout(function(){

　　　　console.log(jh++);

　　},2000)

}

 

 节流 ：在一定的周期执行js

//时间戳实现

 var ft = Date.now();

　　 var time = 2000 ;

　　jhBt.onclick = function(){

　　 var lt = Date.now();

　　if( lt - ft >= time ){

　　 console.log(jh++);

　　ft = lt ;

　　}

}

 

// 节流 计时器

 window.time=null ;

 jhBt.onclick = function ()

 // 为空则执行，执行完了则置空

　　if(!window.time){

　　　　window.time = setTimeout(function(){

　　 　　　　console.log(jh++);

　　 　　　　window.time=null ;

　　　　},2000)

　　}

}

 

 

 自己的一些理解，如有不当之出，还望路过的园友不吝指教，助我早日走上正道。