函数防抖（debounce）和节流（throttle）

小咪咪 2022-12-07 15:27 180阅读 0赞

**前言：**  
在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。

这个时候，防抖和节流是比较好的解决方案。

**防抖（debounce）**

防抖就是指触发事件后在 n 秒内函数只执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

防抖函数分为非立即执行版和立即执行版

非立即执行版：

function debounce(func, wait) {
        let timeout;
        return function () {
            let that = this;
            let args = arguments;
            //为了让 debounce 函数最终返回的函数 this 指向不变以及依旧能接受到 e 参数
    
            if (timeout){
            	clearTimeout(timeout);
            }
            timeout = setTimeout(() => {
                func.apply(that, args)
            }, wait);
        }
    }

非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

立即执行版：

function debounce(func,wait) {
        let timeout;
        return function () {
            let that = this;
            let args = arguments;
    
            if (timeout) {
            	clearTimeout(timeout);
    		}
            let callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait)
    
            if (callNow) func.apply(that, args)
        }
    }

立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

在开发过程中，我们需要根据不同的场景来决定我们需要使用哪一个版本的防抖函数。

**节流（throttle）**

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

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

时间戳版：

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

content.onmousemove = throttle(count,1000);

定时器版:

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

content.onmousemove = throttle(count,1000);

时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关快速理解与区分防抖和节流(debounce & throttle)

从事前端工作的小伙伴肯定都听说过防抖和节流，在工作中，它们常常应用于触发次数频繁的事件，例如(resize、input、scroll、mouse事件…)，因为如果不采取节制，这

不念不忘少年蓝@/ 2023年02月23日 03:49/ 0 赞/ 155 阅读

相关函数防抖（debounce）和节流（throttle）

前言：在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么

小咪咪/ 2022年12月07日 15:27/ 0 赞/ 181 阅读

相关 vue的防抖(debounce)与节流(throttle)

节流throttle.js let timer, flag; / 节流原理：在一定时间内，只能触发一次 @param {Function} func 要

太过爱你忘了你带给我的痛/ 2022年11月03日 04:11/ 0 赞/ 166 阅读

相关防抖(debouncing)函数与节流(throttling)函数

> JS中的防抖(debouncing)与节流(throttling)是用来控制一个函数在一定时间内执行的次数(频次)，他俩个用处相近、但又不完全相同。注：文章中的示例可

怼烎@/ 2022年10月01日 09:55/ 0 赞/ 222 阅读

相关前端---防抖(Debounce) + 节流(Throttle)

防抖节流应用场景 > 监听某个事件，进行网络请求时，该事件频繁的触发，导致网络请求被高频度的进行。严重影响性能，还可能会造成Bug。例如，在监听输入框的 @

落日映苍穹つ/ 2022年08月31日 11:24/ 0 赞/ 229 阅读

相关函数节流(throttle)和函数去斗(debounce)

一.函数节流和函数去斗是解决什么问题的：大家都知道，人的眼睛能感知的最快反应速度是在0.1秒到0.4秒之间，所以0.1秒内的变化从视觉上来说是无意义的。而且如果涉及dom操

约定不等于承诺〃/ 2022年05月23日 02:52/ 0 赞/ 224 阅读

相关函数防抖debounce与节流throttle

//防抖 function debounce(fn,delay){ let timer = null return (...ar

比眉伴天荒/ 2022年04月27日 17:04/ 0 赞/ 213 阅读

相关探究防抖(debounce)和节流(throttle)

本文来自[我的博客][Link 1]，欢迎大家去GitHub上star我的博客本文从防抖和节流出发，分析它们的特性，并拓展一种特殊的节流方式requestAnimation

你的名字/ 2022年03月07日 02:20/ 0 赞/ 292 阅读

相关探究防抖(debounce)和节流(throttle)

本文来自[我的博客][Link 1]，欢迎大家去GitHub上star我的博客本文从防抖和节流出发，分析它们的特性，并拓展一种特殊的节流方式requestAnimation

迈不过友情╰/ 2022年03月07日 02:18/ 0 赞/ 255 阅读

相关 js去抖（Debouncing）和节流（Throttling）

在开发过程中会遇到频率很高的事件或者连续的事件，如果不进行性能的优化，就可能会出现页面卡顿的现象，比如： 1. 鼠标事件：mousemove(拖曳)/mouseover(划

一时失言乱红尘/ 2021年06月24日 16:09/ 0 赞/ 449 阅读