JavaScript 深入系列之节流函数的两种实现方式

[yuanyuanbyte]

本系列的主题是 JavaScript 深入系列，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

节流函数的两种实现方式

节流(throttle): 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

时间戳版

function throttle(func, wait) {
    // 时间戳版
    let previous = 0;
    return function () {
        let now = new Date();
        if (now - previous > wait) {
            previous = now;
            func.apply(this, arguments)
        }
    }
}

时间戳版没有用到定时器，所以不需要再声明一个this变量。

定时器版

function throttle(func, wait) {
    // 定时器版
    let timer;
    return function () {
        let context = this;
        if (!timer) {
            timer = setTimeout(() => {
                timer = null;
                func.apply(context, arguments)
            }, wait)
        }
    }
}

节流的应用场景

• 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
• 搜索联想（keyup）
• 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次

参考

• https://www.jianshu.com/p/c8b86b09daf0
• https://juejin.cn/post/6844903815053852685#heading-22
• https://www.bilibili.com/video/BV17b4y1X7yp?from=search&seid=6671647465100975397

查看原文

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。