js防抖和节流_js防抖的前世今生

防抖和节流目的：都是优化高频率触发执行js代码的一种手段

防抖：上次触发事件和这次触发之间满足一定的空闲时间，js方法才执行一次

例如：

1、生活场景：公车司机在站牌，当前有人不断的上车（规定时间内触发事件超过一次看做不间断触发），司机就不会开走（执行），如果有一段空闲时间没人上车了，司机就会开走（执行）。

2、业务场景：

A：百度搜索。一般搜索绑定输入事件（每次触发输入事件都会触发），如果触发一下就搜索一次，就会给服务器造成巨大压力。所以百度搜索利用防抖：当用户一直在输入的时候，比如说规定时间0.2秒，0.2秒内触发输入事件触发五次，那么这期间都不会触发远程搜索，当某一次输入后停顿满0.2秒才会去触发远程搜索。

B、地图加载：地图的加载是很缓慢的，一般只加载一定范围内的，然后等用户拖动地图到一个之前没加载的地方时，这个时候地图就该加载新的一部分。

使用：当用户在固定时间内（0.3秒），0.3秒内多次完成鼠标抬起和鼠标落下用来移动地图，两次操作在一定时间内，不去加载新的内容。

以输入事件为例子（业务环境：搜索功能）

// 函数防抖
var timer = false;
document.getElementById("debounce").oninput = function(){
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
 
    timer = setTimeout(function(){
        console.log("搜索关键字");
        console.log("函数防抖");
    }, 300);
}; 

timer作为定时器，每次触发输入事件，都清一下定时器（之前未执行的搜索方法就不会再执行），新的定时器在0.3秒后执行方法，那么如果下次点击在0.3秒内，这次赋值的定时器又会被清掉（搜索方法不会执行），直到下次点击相对于这次点击间隔时间大于0.3秒（定时器可能没那么准）再执行一次方法搜索。

节流：规定的时间内，多次触发事件，js方法只执行一次

例如：

1、业务场景：

A、很多抢票、抢购这类操作很多都加了节流，为了避免用户大量点击造成服务器压力，当固定时间内，不论点击多少次，只执行一次抢的动作。

B、很多界面操作，会需要更新当前界面的数据，如果这类操作非常的高频，数据就可以采用节流的形式。

以点击事件为例子（假如业务需要：这个买的按钮可能点击的频率非常高）

如果我一直不间歇点击“买”的这个按钮，但是界面上余额一直不变（用防抖的话），感觉可能没有我一直点（当然这里点击造成的购买操作是正常的，只是节流了购买之后余额变化的请求），过0.3秒表示一下变化，肉眼不太能分辨间隙，还减轻了服务器压力。

// 函数节流
var canRun = true;
document.getElementById("throttle").onclick = function(){
    console.log("买");
    if(!canRun){
        // 判断是否已空闲，如果在执行中，则直接return
        return;
    }
 
    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        console.log("余额变了");
        canRun = true;
    }, 300);
};

总结：

节流和防抖都是为了优化高频触发的现象，具体使用按实际情况来看。个人感觉节流更多可能是为了让用户体验好一些，毕竟一直操作有些情况下是存在的，但是一直没有变化在很奇怪，防抖的话可能对于性能上更友善，具体还是看业务需求。