[转]面试题：什么是防抖节流？说一下它们的区别

分享 / 254 / 0 / 创建于 3年前

中间的示例图把防抖节流讲很清楚，理解目的后看代码就很简单，引用自：juejin.cn/post/6927276556599427079，作者：邑大学子_

一、前言

浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会极速地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能

为了优化体验，需要对这类事件进行调用次数的限制，对此我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果

下面来看一张图：

从上图中，可以看到：

防抖是一段时间后只执行一次
节流是在固定的频率执行

二、防抖（debounce）

防抖是当连续触发事件的时候，事件不会持续触发，当一定时间内没有触发事件后，事件函数才会执行

例如：就好像在百度搜索时，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，它一定是当你结束输入一段时间之后才会触发

下面来举个例子

// 普通方案
let container = document.getElementById('container');

function getUserAction() {
    container.innerHTML = count++;
};
container.onmousemove = getUserAction;  // 鼠标移动会一直触发getUserAction函数

// 优化后的方案
function debounce(func, wait) {
    let timeout;

    return function () {
        let context = this; // 保存this指向
        let args = arguments; // 拿到event对象

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}
container.onmousemove = debounce(getUserAction, 1000); // 1s内不再触发后才会执行事件

这里作一下分析：

在 mousemove事件上绑定处理函数，这时 debounce 函数会立即调用，实际上绑定的函数是 debounce 函数内部返回的函数
每一次事件被触发，都会清除当前的 timeout 然后重新设置超时调用
只有在最后一次触发事件，才能在 wait 时间后执行

我们也可以为 debounce 函数加一个参数，可以选择是否立即执行函数

function debounce(func, wait, immediate) {

    let timeout;

    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout); // timeout 不为null
        if (immediate) {
            let callNow = !timeout; // 第一次会立即执行，以后只有事件执行后才会再次触发
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

三、节流（throttle）

节流是当持续触发事件时，保证一段时间内，只调用一次事件处理函数

例如：浏览器播放事件，每隔一秒计算一次进度信息。

节流的实现方式可以分为两种：

第一种通过时间戳来实现，用一个变量保存上一次执行的时间，每次触发事件时生成一个时间戳，与上一次执行时间比较，如果大于给定的时间，则执行函数

function throttle(func, wait) {
    let context, args;
    let previous = 0;

    return function() {
        let now = +new Date();
        context = this;
        args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

第二种通过定时器来实现，设置一个变量绑定一个定时器，通过if判断定时器是否存在，如果存在就不执行，当定时器执行时把变量置为null，这样在下一次触发事件时就可以设置定时器了

function throttle(func, wait) {
    var timeout;
    var previous = 0;

    return function() {
        context = this;
        args = arguments;
        if (!timeout) {
            timeout = setTimeout(function(){
                timeout = null;
                func.apply(context, args)
            }, wait)
        }

    }
}