js的防抖与节流

已于 2024-01-18 18:06:24 修改
阅读量622 收藏 11
点赞数 12
分类专栏： 前端 文章标签： javascript 前端 开发语言
于 2024-01-17 19:06:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46244470/article/details/132151692
版权
本文详细介绍了JavaScript中的防抖和节流技术，包括它们的工作原理、手写实现过程（包括绑定this、参数传递、取消功能、立即执行和获取返回值），以及节流函数的简化实现和优化策略。
摘要由CSDN通过智能技术生成

目录

认识防抖与节流

在JavaScript中，大量操作都会触发事件，这些事件又会被添加到事件队列中进行排队处理
某些事件如果频繁触发的话会对浏览器的性能造成损耗，我们就可以使用防抖或者节流操作来限制事件的执行频率

防抖

防抖即当一个事件被触发时不会立即执行，而是会等待一段时间后执行，在等待期间如果此事件被重复触发，则等待时间也会重新计算，只有在等待期间内没有事件触发，等待时间结束后才会触发事件的回调函数
简单地说，王者里的回城就是一种防抖

节流

节流即当事件触发时会执行事件的回调函数，之后这个事件将会等待一段时间，在这段时间内触发的事件都将不会执行，直到等待时间结束后如果依旧此事件触发才会执行此事件的回调函数，之后继续等待
简单地说，王者里的技能就是一种节流

如下图所示
结果

手写防抖函数

const debounce = (fn, delay) => {
    let timer = null
    return () => {
        timer && clearTimeout(timer)
        timer = setTimeout(fn, delay)
    }
}
const resize = debounce(() => {
    console.log('resize')
}, 1000)
window.addEventListener('resize', resize)

结果如下
结果
但这个函数十分简陋，没有绑定this，也没有参数传递，接下来我们一步一步来实现这些功能

绑定this与参数

绑定this有两种方式，一种是通过在参数列表中传入this指向，然后通过显式绑定到对应的对象上，还有一种是将返回的箭头函数改成普通函数

  1. 第一种方式
const debounce = (fn, {delay,that}={}) => {
    let timer = null
    return () => {
        timer && clearTimeout(timer)
        timer = setTimeout(fn.apply(that), delay)
    }
}
const resize = debounce(() => {
    console.log(this)

}, {
    delay:1000,
    that:window
})
window.addEventListener('resize', resize)

这段代码粗看似乎没什么问题，但实测发现防抖函数无效，因为apply会立即调用函数，解决方法是将apply封装到一个函数中

const debounce = (fn, { delay, that } = {}) => {
    let timer = null
    return () => {
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(that)
        }, delay)
    }
}
const resize = debounce(() => {
    console.log(this)

}, {
    delay: 1000,
    that: window
})
window.addEventListener('resize', resize)

当我们需要传递的参数过多时可以通过参数解构与默认值的方式获取
2. 第二种方式

const debounce = (fn, delay) => {
    let timer = null
    return function () {
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this)
        }, delay)
    }
}
const resize = debounce(() => {
    console.log(this)

}, 1000)
window.addEventListener('resize', resize)

最后结果都是一样的
结果
参数的绑定十分简单，这里就不再赘述了

const debounce = (fn, delay) => {
    let timer = null
    return function (...args) {
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, delay)
    }
}
const resize = debounce((event) => {
    console.log(this, event)
}, 1000)
window.addEventListener('resize', resize)

取消功能

有时候事件触发了但我们之后又不想函数执行，可以增加一个取消功能，我们可以在返回的函数上直接添加一个属性cancel

const debounce = (fn, delay) => {
    let timer = null
    const _debounce = function (...args) {
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, delay)
    }
    _debounce.cancel = function () {
        timer && clearTimeout(timer)
    }
    return _debounce
}
const resize = debounce((event) => {
    console.log(this, event)
}, 1000)
window.addEventListener('resize', resize)

立即执行

立即执行即我们需要在事件触发时的第一次就执行函数

const debounce = (fn, { delay = 1000, immediate = false } = {}) => {
    let timer = null
    let isInvoke = false

    const _debounce = function (...args) {
        if (immediate && !isInvoke) {
            fn.apply(this, args)
            isInvoke = true
            return
        }
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, delay)
    }
    _debounce.cancel = function () {
        timer && clearTimeout(timer)
    }
    return _debounce
}
const resize = debounce((event) => {
    console.log(this, event)
}, {
    delay: 1000,
    immediate: true
})
window.addEventListener('resize', resize)

结果

获取返回值

有时候我们在手动调用防抖函数的时候需要得到函数的返回值就可以这么写，第一种方案是通过回调函数，第二种则是返回一个Promise

  1. 传入一个回调函数来获取返回值
const debounce = (fn, { delay = 1000, immediate = false, callback } = {}) => {
    let timer = null
    let isInvoke = false

    const _debounce = function (...args) {
        if (immediate && !isInvoke) {
            fn.apply(this, args)
            isInvoke = true
            return
        }
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            let res = fn.apply(this, args)
            callback && callback(res)
        }, delay)
    }
    _debounce.cancel = function () {
        timer && clearTimeout(timer)
    }
    return _debounce
}
const resize = debounce((event) => {
    console.log(this)
    return "resize return"
}, {
    delay: 1000,
    immediate: false,
    callback: (res) => {
        console.log(res)
    }
})
resize()
  1. 返回一个Promise得到返回值
const debounce = (fn, { delay = 1000, immediate = false } = {}) => {
    let timer = null
    let isInvoke = false

    const _debounce = function (...args) {
        return new Promise((resolve, reject) => {
            if (immediate && !isInvoke) {
                fn.apply(this, args)
                isInvoke = true
                return
            }
            timer && clearTimeout(timer)
            timer = setTimeout(() => {
                let res = fn.apply(this, args)
                resolve(res)
            }, delay)
        })
    }
    _debounce.cancel = function () {
        timer && clearTimeout(timer)
    }
    return _debounce
}
const resize = debounce((event) => {
    console.log(this)
    return "resize return"
}, {
    delay: 1000,
    immediate: false
})
resize().then((res) => {
    console.log(res)
})

结果都是一样的
结果

最终版

最后我们将以上代码优化一下就得到了最终版本的防抖函数

const debounce = (fn, { delay = 1000, immediate = false } = {}) => {
    let timer = null
    let isInvoke = false

    const _debounce = function (...args) {
        return new Promise((resolve, reject) => {
            try {
                if (immediate && !isInvoke) {
                    let res = fn.apply(this, args)
                    isInvoke = true
                    resolve(res)
                    return
                }
                timer && clearTimeout(timer)
                timer = setTimeout(() => {
                    let res = fn.apply(this, args)
                    timer = null
                    isInvoke = false
                    resolve(res)
                }, delay)
            } catch (error) {
                reject(error)
            }
        })
    }
    _debounce.cancel = function () {
        timer && clearTimeout(timer)
        isInvoke = false
        timer = null
    }
    return _debounce
}

手写节流函数

节流函数在实现上和防抖函数稍有不同，不通过定时器而是通过时间戳
以下是一个简略的节流函数实现

const throttle = (fn, { wait = 1000, }) => {
    let preTime = 0;
    const _throttle = function (...args) {
        let nowTime = Date.now();
        if (nowTime - preTime > wait) {
            fn.apply(this, args);
            preTime = nowTime;
        }
    }
    return _throttle
}
const resize = throttle(function () {
    console.log("resize")
}, {
    wait: 1000,
})
window.addEventListener('resize', resize)

结果如下
结果

节流函数的优化

至于节流函数的一些优化：

  1. 节流函数立即执行与尾部执行
  2. 添加取消功能
  3. 获得返回值

与防抖函数的思路大差不差，这里就不再过多赘述，以下是完全版

const throttle = (fn, { wait = 1000, leading = true, trailing = false } = {}) => {
    let preTime = 0;
    let timer
    const _throttle = function (...args) {
        return Promise((resolve, reject) => {
            try {
                let nowTime = Date.now();
                if (!leading && preTime == 0) {
                    preTime = nowTime
                }
                let interval = wait - (nowTime - preTime)
                if (interval <= 0) {
                    let res = fn.apply(this, args)
                    resolve(res)
                    if (timer) clearTimeout(timer)
                    preTime = nowTime
                    timer = null
                    return
                }
                if (trailing && !timer) {
                    timer = setTimeout(() => {
                        let res = fn.apply(this, args)
                        resolve(res)
                        preTime = Date.now()
                        timer = null
                    }, interval)
                }
            } catch (error) {
                reject(error)
            }
        })
    }
    _throttle.cancel = function () {
        if (timer) clearTimeout(timer)
        preTime = 0
        timer = null
    }
    return _throttle
}
法玛梅林
关注
  • 12
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
防抖与节流
qq_37635012的博客
04-08 574
如果用户会频繁的触发事件执行，而对于DOM操作，资源加载等耗费性能的处理，就会导致响应跟不上触发，很有可能导致界面卡顿，甚至浏览器的崩溃，防抖和节流就是解决这种问题的。函数防抖和节流就是为了处理同一时刻事件函数的触发频率和执行频率这两者关系的，防抖和节流都是为了降低函数执行频率的策略。防抖和节流本质都是以闭包形式存在，通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，最后用setTi...
彻底搞懂JavaScript防抖与节流
艾编程带你学前端博客
12-14 815
防抖的概念在连续的事件中，只需触发最后一次回调，也就是将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay（延迟）时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。应用场景搜索框输入查询、手机号、邮箱验证输入检测。只需用户最后一次输入完，再发送请求窗口大小resize。只需窗口调整完成后，计算窗口大小，防止重复渲染。什么是节流使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。节流应用场景。
JS的防抖和节流
weixin_33725722的博客
03-02 128
在浏览器中如果一个事件被频繁触发，比如输入框的 keyup, 窗口的 resize 以及 scroll 事件等，如果不做任何处理，事件的回调函数将会对应执行，这必然会加重浏览器的负担，影响用户的体验。面对这种场景，我们可以用函数的防抖 (debounce) 和节流 (throttle) 来处理。 函数防抖 防抖 debounce: 让事件触发时的回调在一定的延时后执行。如果在计时期间又触发了事...
JavaScript：节流与防抖
最新发布
m0_65029152的博客
07-20 1701
本文主要记录JavaScript中，防抖和节流的相关内容和技术应用；
JS—节流与防抖
热门推荐
weixin_45709829的博客
04-01 4万+
一、js防抖和节流 在进行窗口的resize、scroll、输出框内容校验等操纵的时候，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常之差。那么为了前端性能的优化也为了用户更好的体验，就可以采用防抖（debounce）和节流（throttle）的方式来到达这种效果，减少调用的频率。 二、为什么滚动scroll、窗口resize等事件需要优化 滚动事件的应用很频繁：图片懒加载、下滑自动加载数据、侧边浮动导航栏等。 在绑定scroll、resize事件时，但它发生的时候，它被触发的频率非
js防抖和节流
JiaPeng366的博客
04-08 477
1、概念 防抖：指在事件被触发的n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。 节流：指在单位时间内，只能有一次触发事件的回调函数执行，如果在同一单位时间内事件再次被触发，则不生效。 2、应用场景 防抖：表单验证需要服务端配合，如input输入用户名，需要在输入过程中查询该用户是否注册过，连续的输入事件只有最后一次执行请求操作。 节流：检测浏览器的resize事件，根据resize的变化需要实时计算的大小和位置的场景。连续的事件调用，会变成每单位时间只触发一次回调。 3、函数实现 函数防抖的实现
JS之防抖和节流
simon的博客
05-06 950
文章目录防抖原理介绍代码实现及优化自定义实现优化立即执行优化返回值节流原理介绍代码实现及优化自定义实现优化最后执行两者区别 防抖和节流都是为了避免窗口的resize、scroll、输入框内容校验等事件处理函数被频繁调用，因此采用防抖和节流来限制事件调用的频率 防抖 原理介绍 防抖是指当持续触发事件时，一定时间段内没有再次触发事件，事件处理函数才会执行一次，如果设定的时间段内又一次触发了事件，...
js 防抖与节流
weixin_49707375的博客
12-12 404
防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高，导致响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。但二者应对的业务需求不一样，所以实现的原理也不一样，下面具体来看看。01 引入首先举个例子，有这样一个需求：当输入框内容发生改变的时候，响应处理函数在没有加入防抖和节流的效果： 效果：当输入框里每输入一个，就会触发一次 hello()函数。虽然效果达到了，但明显不是我们要的理想效果，假如函数中存在一个ajax请求，意味着我们每输入一个字符，就会向服务器发送一次请求，这是
JavaScript防抖与节流
geejkse_seff的博客
05-14 405
JavaScript防抖与节流 1 为什么需要防抖和节流 2 防抖与节流原理 3 实现一个防抖函数 3.1 初步实现 3.2 this问题 3.3 event问题 3.4 立即执行 3.5 返回值问题 3.6 取消防抖 3.7 总结 4 实现节流函数 4.1 通过时间戳实现节流 4.2 使用定时器实现节流 4.3 时间戳和定时器组合实现 4.4 节流优化 5 应用场景 1 为什么需要防抖和节流 在前端开发当中，有些交互事件，会被频繁触发，这样会导致我们的页面渲染性能下降，如果频繁触发接口
JS防抖和节流（详解）
Zhang_wang_yun的博客
04-10 4856
函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
JS中的防抖与节流及作用详解
10-17
与防抖不同，节流是在固定时间间隔内保证函数至少执行一次。例如，在滚动事件中，我们可能希望每滚动一定距离才更新一次图片的懒加载状态，而不是每次滚动都更新。这样可以减少对浏览器性能的影响。 在提供的代码中...
JS防抖动
weixin_34212762的博客
04-10 102
这道题目经常与事件触发器同时存在，为了考察面试者在一些具体业务流程上（信息流，搜索框输入查询）等，能否综合的考虑实现思路。 题目：在某些信息列表中一般采用瀑布流，滚动一屏时加载相应的数据，请思考如何避免连续下拉时而产生的问题（可能是页面崩溃，也可能是巨卡无比）。 一般情况下，如果碰到这样的面试题，防抖动机制，就能很好的解决，这方面最早的应用实践还是Twitter，开发者写了一篇博客...
JS防抖与节流
h360583690的博客
08-18 503
前言 JS中防抖与节流算是性能优化的知识，在编写代码中不注重防抖与节流的方面，会造成资源浪费，严重会造成浏览器卡死，崩溃等影响。防抖与节流都是为了减轻浏览器的压力，但又有些区别。 防抖是让一个函数在一段时间间隔内没有调用，才开始执行被调用。 节流是让一个函数无法在很短的时间间隔内被多次调用。意思就是一个函数被调用了后，得让它歇一下，等它歇完了（等一定的时间间隔之后），才能被再次调用。 一、防抖 像我们平常在输入框输入时，每输入一个字符...
js -防抖动与节流函数
Jonathan的博客
07-06 1288
针对一些会频繁触发的事件如scroll、resize，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。 因此针对这类事件要进行防抖动或者节流处理 防抖动 它的做法是限制下次函数调用之前必须等待的时间间隔。正确实现 debouncing 的方法是将若干个函数调用合成一次，并在给定时间过去之后仅被调用一次。 // 将会包装事件的 debounce 函数// 将...
js之防抖和节流
qq_59599812的博客
09-23 118
节流：在固定的时间内，多次操作一个事件，以首次为准（只执行一次操作），固定的时间内不能触发第二次事件。原理：延迟执行下一次事件触发 “在某个时间段内执行一次事件”。防抖：多从操作同一个事件，以末次为准（只执行最后一次操作）。原理：延迟执行下一次事件触发 “在某个时间段内执行一次事件”。作用：降低代码执行频率。作用：降低代码执行频率。
JavaScript防抖和节流
油墨香^-^的博客
02-22 629
作为学习，我们肯定不满足只会用第三方的库，成为一个API程序员。另外为了一个防抖函数引用整个库对最终打包项目的大小也会有影响。所以，我们要实现一个自己的防抖函数。注意，在整个实现过程中，我尽可能不采用ES6的语法；因为如果我们不babel来处理我们的代码，ES6以上的语法会存在兼容性问题；我们封装的防抖和节流函数就不太具备通用性；2.3.1. 防抖基本功能防抖函数的核心思路如下：当触发一个函数时，并不会立即执行这个函数，而是会延迟（通过定时器来延迟函数的执行）
[JS]防抖和节流
qq_34044224的博客
12-19 406
防抖(Debouncing) 像防抖还是很容易想到的，大概意思就是延时处理，然后如果在这段延时内又触发了事件，则重新开始延时 var t; window.addEventListener('resize',function(){ if(t) clearTimeout(t); t = setTimeout(function(){ console.log(1
Js---防抖和节流
前端与计算机相关知识的分享，博主的qq523235674
01-23 1351
一：为什么需要防抖与节流 防抖和节流都是为了解决短时间内大量触发某函数或者事件而导致的性能问题，比如在 1.用户体验上，触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死，卡顿的现象 2.服务器上：加重服务器压力 二：防抖 防抖是当事件或函数被触发后，延迟n秒后在执行回调，如果在这n秒内事件或函数又被触发，则重新计时，直到n秒内没有触发事件或函数，则执行回调函数 图文解释： （回城的时间就相当于延迟时间，如果在回城的时间内再次触发回城则重新倒计时回城时间） 案例：表单输入..
js防抖与节流
sanhangzhongwen的博客
01-10 349
防抖与节流
JS防抖与节流技术深度解析
"js防抖和节流的深入讲解" JavaScript中的防抖(debounce)和节流(throttle)是两种常见的优化技术，它们主要用于控制频繁触发的事件，如用户输入、窗口滚动、页面加载等，以避免过度消耗系统资源，提高用户体验。 ##...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值