节流和防抖的区别？

处理函数在短时间内被频繁调用。如果处理函数还需要调用后台接口，那么可能上次还没有响应，下一次请求又来了。这样无意中增加了服务器的压力，而且对用户来说，也会造成卡顿，这不是用户和程序员想要的。
节流和防抖大家应该都用过，但有一点我不明白，节流和防抖都是延迟执行，那么它们的区别在哪里？

举例：

var d1=document.getElementById('d1');
var num=0;
var change=function(){
    num++;
    d1.innerHTML=num;
}

先来看看节流：

//节流时间戳版本
function throttle(fun,timer){  //传入函数和时间
    var pre=0;  //初始的时间
    return function(){ 
    var now=new Date();  //创建当前时间
    if(now-pre>timer){  //当前时间减去初始化时间大于1000则执行函数
        fun();
        pre=now;  //从新给初始化时间赋值
    }
    }
}
d1.onmousemove=throttle(change,1000);  
------------------------------------------------------------------
//节流定时器版本
function throttle(fun,time){
    var timer=null; 
    return function(){  
    if(timer==null){ 
        timer=setTimeout(()=>{ 
            fun()
            timer=null;
        },time)
    }
    }
}
d1.onmousemove=throttle(change,1000);  

再看下防抖：

//封装防抖处理函数1000毫秒后执行
function debounce(fun,time){  //传入函数和时间
    var timer=null;  
    return  function(){    //通过闭包的方式return出一个函数
        if(timer){clearTimeout(timer)} 
        timer=setTimeout(()=>{   
            fun();       //调用传入的函数  
        },time)         //用传入的时间进行延迟
}
}
d1.onmousemove=debounce(change,1000);  
------------------------------------------------------------------
//封装立即执行防抖处理函数
function debounce(fun,time){  
    var timer=null;
    return function(){
    if(timer==null){fun()}
    else{clearTimeout(timer)}
    timer=setTimeout(()=>{   
        timer=null;  
    },time)      
    }    
}
d1.onmousemove=debounce(change,1000); 

大家应该看出区别了，虽然都是延时执行，但两个方法在执行次数上还是有区别。防抖因为会对定时器进行清除，所以会产生定时器无限延迟刷新，而节流没有清除定时器所以会保证在规定的时间内肯定会执行一次。

那么它们各自的使用场景有哪些呢？
防抖

• 短信验证码
• 提交表单
• resize 事件
• input 事件（当然也可以用节流，实现实时关键字查找）

节流

• scroll 事件，单位时间后计算一次滚动位置
• input 事件（上面提到过）
• 播放事件，计算进度条

暂时只能想到这些，未尽之处,望大家指正。