亲宝软件园·资讯

展开

移动端事件(四)—— 函数防抖和函数节流

小白蔡 人气:0

函数防抖

  在对于函数高频次执行时,只执行一次。

  有两种情况:

    1.尾部执行:高频次触发时,只执行最后一次

    2.头部执行:高频次触发时,只执行第一次

 

尾部执行实现很简单,先设一个定时器,一开始触发的时候我不执行,稍微延迟一会后再执行,当你下次执行时,我把上一次的定时器消失,这样就只会执行最后一次了。

 //防抖尾部执行    
 let nub = 0;
 let timer = 0;   
 box.onmousemove = function(){
     clearTimeout(timer);
     timer = setTimeout(()=>{
         console.log(1);
     },200);
}  

 

头部执行会复杂一些,这里我们多添加一个变量赋值为true,首先先判断这个变量是否为true;true的话就把事件执行了,执行完后把这个变量设为false。然后在定时器结束后,再把变量设为true。

// 防抖头部执行
let nub = 0;
let timer = 0;  
let isStart = true; 
box.onmousemove = function(){
    if(isStart){
        console.log(1);
        isStart = false;
    }
    clearTimeout(timer);
    timer = setTimeout(()=>{
        isStart = true;
    },200);
} 

 

函数节流

  函数节流,把执行间隔拉大。

    与函数防抖一样有头部与尾部执行之分

 

尾部执行:一样调用定时器,首先判断定时器是否开始,如果开启了就不往下执行,定时器没有开启再往下执行,执行完后,把定时器归回0

// 尾部执行
 let timer = 0;
 box.onmousemove = function(){
     if(timer){
         return ;
     }
     timer = setTimeout(()=>{
         console.log(0);
         timer = 0;
     },1000);
 } 

 

头部执行:就是在开启定时器之前执行,定时器决定的是下次再执行的时候。

 

// 头部执行
let timer = 0;
box.onmousemove = function(){
    if(timer){
        return ;
    }
    console.log(0);
    timer = setTimeout(()=>{
        timer = 0;
    },1000);
} 

 

明天将对上面的内容进行封装,封装后就可以开箱即用了!

加载全部内容

相关教程
猜你喜欢
用户评论