浅聊防抖与节流 实现与应用

关注公众号， 设置为 ‘星标’ ，更多精彩内容，第一时间获取 防抖与节流 导读目录 防抖(debounce) 防抖应用场景 非立即执行版 立即执行版本 合成版本 防抖 节流 节流应用场景 时间戳版本 定时…

关注公众号， 设置为  ‘星标’ ，更多精彩内容，第一时间获取

防抖与节流

导读目录

防抖(debounce)

防抖应用场景 
非立即执行版 
立即执行版本 
合成版本 防抖 

节流

节流应用场景 
时间戳版本 
定时器版本 

总结

参考 

1防抖(debounce)

防抖应用场景

非立即执行版

/** * @description:  * @param {*} func 触发的时间 * @param {*} wait 多少时长才执行事件 * @return {*} */        function debounce(func, wait) {            let timeout;            return function(){                // 获取当前作用域和参数                const context = this;                const args = [...arguments]                 // 如果当前timeout 存在                // 清空定时器,再次等待wait时间过后再次执行事件                if(timeout) clearTimeout(timeout)                // 定时执行 传递进来的事件                timeout = setTimeout(()=>{                    func.apply(context,args)                },wait)              }        }

立即执行版本

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

合成版本 防抖

/** * @desc 函数防抖 * @param func 函数 * @param wait 延迟执行毫秒数 * @param immediate true 表立即执行，false 表非立即执行 */function debounce(func, wait, immediate) {  let timeout;  return function () {    const context = this;    const args = [...arguments];    if (timeout) clearTimeout(timeout);    if (immediate) {      const callNow = !timeout;      timeout = setTimeout(() => {        timeout = null;      }, wait)      if (callNow) func.apply(context, args)    }    else {      timeout = setTimeout(() => {        func.apply(context, args)      }, wait);    }  }}

2节流

节流应用场景

时间戳版本

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

定时器版本

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)        }    }}

3总结

参考

https://github.com/mqyqingfeng/Blog/issues/26

React Hook | 必 学 的 9 个 钩子
Vue权限路由思考
Vue 组件通信的 8 种方式
MYSQL常用操作指令
TypeScript学习指南(有PDF小书+思维导图)

原创不易，素质三连

本文分享自微信公众号 - 前端自学社区（gh_ce69e7dba7b5）。如有侵权，请联系 support@oschina.cn 删除。本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

本文标题： 浅聊防抖与节流 实现与应用

本文作者： OSChina

发布时间： 2021年04月15日 09:46

最后更新： 2025年04月03日 11:07

原始链接： https://haoxiang.eu.org/1a8de9cb/

版权声明： 本文著作权归作者所有，均采用CC BY-NC-SA 4.0许可协议，转载请注明出处！

Howe Hsiang

赏

× 喜欢就赞赏一下呗！