移动端事件（五）—— 函数防抖和函数节流

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

其实在实际开发中函数防抖和函数节流，我基本都没用过，除了一次手写jsonp插件库，像有些文章说搜索框实时发请求这些，一般都是离开焦点发请求时直接禁用掉输入框的，也不存在频繁触发事件。但是不得不说面试官们真挺爱考的。

函数防抖

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

　　有两种情况：

　　　　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);
}