前端的防抖和节流

Posted 2021-01-11 xiaohuanhuan

 防抖和节流都是优化高频率执行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)

　　}

}

 

 

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