js 函数防抖(debounce)与节流(throttle)

weixin79893765432...

已于 2022-11-13 18:43:16 修改

阅读量3.8k

点赞数 2

分类专栏： JavaScript 文章标签：函数节流防抖

于 2020-07-21 13:23:57 首次发布

本文链接：https://blog.csdn.net/mChales_Liu/article/details/107486779

版权

JavaScript 专栏收录该内容

84 篇文章 6 订阅

订阅专栏

前言

一、函数防抖(debounce)——多次触发只执行最后一次

二、函数节流(throttle)——规定时间内只触发一次

前言

函数防抖和函数节流：都是用来优化高频率执行的 JavaScript 代码的方法。

函数防抖（debounce）：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

函数节流（throttle）：每隔一段时间，只执行一次函数。

一、函数防抖(debounce)——多次触发只执行最后一次

函数防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

举个栗子：

var timer;
function debounce(fn, delay) {
    clearTimeout(timer);
    timer = setTimeout(function(){
        fn();
    }, delay);
}

// 应用实例
function f(){
    console.log('test');
}
document.onmousemove = () => {
    debounce(f, 1000);
}

上面例子中，在document中鼠标移动的时候，会在最后一次触发onmousemove事件后的1秒之后，执行回调函数f。但这种写法存在弊端：只能在setTimeout的父级作用域中声明 timer 才能保证是同一个timer。

使用闭包优化上面的代码：

function debounce(fn, time){
    var timer;
    return function(){
        var _this = this;
        var args = arguments;
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(function(){
            fn.apply(_this, args);// 用 apply 指向调用 shakeProof 方法的对象，相当于 _this.fn(args);
        }, time);
    }
}

// 应用实例
function f(event, content){
    console.log([event, content]);
}
var testFn = debounce(f, 1000);// 将函数 f 变为防抖函数

document.onmousemove = function (e) {
    var e = e || window.event;
    testFn(e, 'test'); // 给防抖函数传参
}

采用 ES6 语法优化上述防抖代码：

export const debounce = (fn, delay) => {
    let timer = null;
    let that = this;
    return (...args) => {
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(that, args);
        }, delay);
    }
}

【注意】

这里使用了 ES6 的箭头函数来做闭包，会产生一个隐藏的问题：匿名函数的执行环境通常具有全局性，因此 this 在非严格模式下默认指向 window 对象，这会导致我们拿不到出入的额外的参数。所以为了避免这个问题，我们依然使用 apply() 重新指定 this 为函数 debounce() 的作用域。
若往防抖函数中传递额外的参数，在使用的函数里直接传就行。（未完待续）

二、函数节流(throttle)——规定时间内只触发一次

函数节流：每隔一段时间，只执行一次函数。

函数节流的实现方案有 2 种：

使用定时器实现函数节流：可通过使用定时器，在操作的时候让函数延时执行，如果在这个时间内还在操作，则清除原来的定时器，再创建一个新的定时器执行。
使用时间戳实现函数节流：用时间戳来判断是否已到执行时间，记录上次执行的时间戳，然后每次触发事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经达到时间差（Xms），如果是则执行，并更新上次执行的时间戳，如此循环。

1、使用定时器实现函数节流

function throttle(fn, delay) {
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
        }, delay)
    }
}

// 应用实例
function f(e, content) {
    console.log([e, content]);
}
var testFn = throttle(f, 1000); // 节流函数
document.onmousemove = function (e) {
    testFn(e, 'test'); // 给节流函数传参
}

采用 ES6 语法优化节流代码：

export const throttle = (fn, delay) => {
    let timer = null;
    let that = this;
    return (args) => {
        if (timer) return;
        timer = setTimeout(() => {
            fn().apply(that, args);
            timer = null;
        }, delay);
    }
}

2、使用时间戳实现函数节流

function throttle(fn, delay) {
    var previous = 0;
    // 使用闭包返回一个函数并且用到闭包函数外面的变量previous
    return function() {
        var _this = this;
        var args = arguments;
        var now = new Date();
        if(now - previous > delay) {
            fn.apply(_this, args);
            previous = now;
        }
    }
}

// 应用实例
function f(e, content) {
    console.log([e, content]);
}
var testFn = throttle(f, 1000); // 节流函数
document.onmousemove = function (e) {
    testFn(e, 'test'); // 给节流函数传参
}