JS 防抖封装方法

防抖封装方法:

javascript 复制代码
/**
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result

  const later = function () {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }

  return function (...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    // 如果延时不存在,重新设定延时
    if (!timeout) timeout = setTimeout(later, wait)
    if (callNow) {
      result = func.apply(context, args)
      context = args = null
    }

    return result
  }
}
相关推荐
linux_cfan7 小时前
videojs v10 源代码系列解读:10 · `DestroyMixin`:双重 rAF 延迟销毁
前端·javascript·音视频
计算机魔术师7 小时前
英伟达是人工智能领域的"中央银行"
前端
我的div丢了肿么办7 小时前
顶部区域固定,左侧区域滚动,右侧区域滚动,彼此独立
前端·css
雪芽蓝域zzs7 小时前
第四十六节:顶部【驾驶舱】独立大屏页面实现
前端·javascript·vue.js
ocean21037 小时前
2025-2026年C++专题大厂面试高频问题
开发语言·c++·面试
IMPYLH7 小时前
HTML 的 <select> 元素
前端·html
爱丶不疚7 小时前
Electron:Module 与 Service 的职责边界与加载时序编排
前端·electron·nestjs
白远山7 小时前
健身场馆无人自动化系统实战指南:从架构设计到部署全流程解析
java·开发语言·架构·需求分析
三十而立洋7 小时前
深入浅出 Nginx:从核心原理到实战指南
前端·前端工程化
右耳朵猫AI7 小时前
Node.js周刊2026W37 | 三处进程崩溃修复、fs 内置 glob、Workers 模块注册表、Vitest 5.0
javascript·后端·node.js