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
  }
}
相关推荐
wszy18095 分钟前
外部链接跳转:从 App 打开浏览器的正确姿势
java·javascript·react native·react.js·harmonyos
pas1366 分钟前
31-mini-vue 更新element的children
前端·javascript·vue.js
lsx2024066 分钟前
《Foundation 下拉菜单》
开发语言
期待のcode10 分钟前
认识Java虚拟机
java·开发语言·jvm
wordbaby10 分钟前
TanStack Router 实战:如何构建经典的“左侧菜单 + 右侧内容”后台布局
前端·react.js
raining_peidx14 分钟前
xxljob源码
java·开发语言
肥猪猪爸15 分钟前
双重检查锁(DCL)与 volatile 的关键作用
java·开发语言·单例模式
yaoxin52112323 分钟前
289. Java Stream API - 从字符串的字符创建 Stream
java·开发语言
oMcLin25 分钟前
如何在 RHEL 7 上优化 Nginx 与 PHP‑FPM 配置,确保高并发 Web 应用的稳定性与响应速度?
前端·nginx·php
癫狂的兔子31 分钟前
【Python】【Flask】抽奖功能
开发语言·python·flask