前端的防抖和节流
防抖和节流都是优化高频率执行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)
}
}
自己的一些理解,如有不当之出,还望路过的园友不吝指教,助我早日走上正道。