节流和防抖节流顾名思义是节省流量, 通俗点说就是当打开水龙头的阀门，水哗哗的往下流，常规操作是将水龙头关小一些，来减少水

节流 (throttle)

什么是节流

节流顾名思义是节省流量, 通俗点说就是当打开水龙头的阀门，水哗哗的往下流，常规操作是将水龙头关小一些，来减少水流的量。同样在前端交互中，当用户频繁操作如上下滑动加载更多内容时候，我们可以通过节流的方式来减少前端的请求次数。

将请求控制在一个固定的时间区间并在该区间内只允许发生一次。

实现机制

时间戳和定时器来分别实现throttle方法。

时间戳

function throttle(func, delay = 0){
    let prev = Date.now();
    return function(){
        let now = Date.now();
        if(now - prev >= delay){
            prev = Date.now()
            func.apply();
    }
}

定时器

function throttle(func, delay = 0){
    let timeout = null; 
    return function(){
        if(timeout) return;
        timeout = setTimeout(()=>{
          func.apply()
          timeout = null;
        }, delay); 
    }
}

应用场景

1. 滚动加载更多内容 (上下滑动 scroll）

防抖 (debounce)

什么是防抖

当持续触发事件，一定是时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

实现机制

时间戳

function debounce(func, delay = 0){
    let timeout = null; 
    return function(){
       if(timeout) clearTimeout(timeout);
       timeout = setTimeout(func, delay);
    }
}

定时器

function debounce(func, delay = 0){
    let prev = Date.now();
    return function(){
        const now = Date.now()
        if(now - prev <= delay){
            prev = Date.now()
        }else{
            func.apply()
        }
    }
}

应用场景

1. 页面resize （地图重绘)

2. 模糊查找&搜索（用户频繁输入关键字查找内容）

总结：

节流和防抖适用于不同的业务场景，但实现本质上大同小异，都是利用js的闭包（closure)原理来缓存变量的状态从而来实现

节流和防抖。

喜欢别忘记了给个赞。