前端的防抖和节流

时间：2018-10-10 14:15:23 阅读：144 评论：0 收藏：0 [点我收藏+]

标签：get ffffff 输入 document ++ 用户输入 log 空闲 span

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

dom 结构

　　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)

　　}

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

前端的防抖和节流

标签：get ffffff 输入 document ++ 用户输入 log 空闲 span

原文地址：https://www.cnblogs.com/xiaohuanhuan/p/9765414.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行