看完彻底理解js防抖和节流 | 掘金·日新计划

函数防抖

场景：input事件模糊查询

input输入框的input事件会在输入框内容发生改变的时候执行，那么就存在一个问题：每次输入，都会触发input事件，执行函数，或者接口请求，而这并不是我们想要的：比如，你想要模糊查询 "liu" 相关的所有数据，而当你在input框中输入 "l" 的时候就已经触发了input事件，去请求了接口，而这并不是我们想要的。所以，我们的防抖函数就登场了；

定义

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。

function debounce(fn, wait) {
    var timeout = null;      //定义一个定时器
    return function() {
        if(timeout !== null) 
                clearTimeout(timeout);  //清除这个定时器
        timeout = setTimeout(fn, wait);  
    }
}
// 处理函数
function handle() {
    console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

如上所见，当持续触发scroll函数，handle函数只会在1秒时间内执行一次，在滚动过程中并没有持续执行，有效减少了性能的损耗

函数节流

场景：点击按钮重复发送请求：(节流)

项目中点击创建、编辑、删除等按钮都会发送http请求，网络卡顿的情况下点击按钮之后不能快速的响应，一般情况下用户会重复点击按钮，所以会造成重复发送请求问题，一定量造成卡顿延迟问题，这个时候便可以采用节流

定义

当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次
用一句话总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行
实现函数节流我们主要有两种方法：时间戳和定时器
例如

var throttle = function(func, delay) {
    var prev = Date.now();
    return function() {
        var context = this;   //this指向window
        var args = arguments;
        var now = Date.now();
        if (now - prev >= delay) {
            func.apply(context, args);
            prev = Date.now();
        }
    }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

这个节流函数利用时间戳让第一次滚动事件执行一次回调函数，此后每隔1000ms执行一次，在小于1000ms这段时间内的滚动是不执行的

再举一个定时器的例子：

var throttle = function(func, delay) {
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

闭包的一个场景就是函数防抖节流。