首页 > 其他分享 >js封装防抖函数

js封装防抖函数

时间:2024-01-26 09:57:38浏览次数:25  
标签:防抖 封装 context args immediate js timeout last wait

js封装的防抖函数

/** 防抖函数
 * @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
  }
}

标签:防抖,封装,context,args,immediate,js,timeout,last,wait
From: https://www.cnblogs.com/Cxymds/p/17988669

相关文章

  • [转]使用 mathjs 解决 js 小数精度问题
    原文地址:使用mathjs解决js小数精度问题-公瑾当年-博客园很经典的例子是0.1+0.2!=0.3(实际等于0.30000000000000004)不等的原因机器中采用二进制存储数据,比如,35会被存储为:00100011(2^5+2^1+2^0)。0.375会被存储为:0.011(1/2^2+1/2^3=1/4+1/8=0.375)而对于像......
  • vue echarts hooks 封装
    vue中echartshooks的封装,监听主体的变化,监听窗口大小的变化。监听元素大小的变化hooksimportechartsfrom'@/echart/themeInit'import{debounce}from'@/utils/dehounce'import{useAppStore}from'@/pinia'constuseEchartHooks=(id,groupId)=>{......
  • java 类转json串,好用来存储
    在Java中,将一个类实例转换为JSON字符串可以使用一些第三方库,比如Gson,Jackson和FastJSON等。下面以Gson为例,展示一个简单的类转换为JSON字符串的示例:importcom.google.gson.Gson;publicclassMyClass{privateintid;privateStringname;publicMyClass(in......
  • js根据地区判断进行跳转页面
    <script>//获取访问者的IP地址functiongetVisitorIP(){returnnewPromise((resolve,reject)=>{constxhr=newXMLHttpRequest();xhr.open('GET','https://ipinfo.io/json',true);xhr.onload=func......
  • Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南
     在Vue中使用JSON文件有多种方式,包括使用fetch方法加载JSON文件、使用axios库加载JSON文件,以及将JSON文件导入为模块。以下是详细描述和相应的示例代码:1.使用fetch方法加载JSON文件:步骤:创建一个JSON文件,例如 data.json://data.json{"name":"John","age":......
  • HTTP 请求体编码用 json 还是 x-www-form-urlencoded
    application/x-www-form-urlencodedapplication/jsonapplication/json对初学者友好application/x-www-form-urlencoded对Postman友好axios和superagent默认使用JSONbody来自专家的建议TheStripeAPIisorganizedaroundREST.OurAPIhaspredictableresour......
  • js中数组反转的方法总结
    1.常用的方法reverse()[1,2,3,4].reverse()  //[4,3,2,1]2.采用for循环方式使用递减循环遍历的方式,将元素一次存入新的数组中,新数组就是反转后的新数组constdataRef=[1,2,3,4]constnewArr:any[]=[]for(leti=dataRef.length-1;i>=0;i--){ne......
  • JS中的箭头函数与this
    JS中的箭头函数与thisJavaScript在ES6语法中新增了箭头函数,相较于传统函数,箭头函数不仅更加简洁,而且在this方面进行了改进。this作为JavaScript中比较诡异的存在,许多文章对于this的解释也不尽相同,本篇文章试图厘清JS中函数与this的关系。一、JS中函数的写法1.常规函数的写法......
  • js位置尺寸
    元素.offsetParent获取父级元素元素尺寸偏移尺寸.offsetHeight;高度(加上边框和可见的水平滚动条),只读.offsetWidth;宽带(同上),只读客户端尺寸.clientHeight;高度(不含边框滚动条),只读.clientWidth;宽度(同上),只读另一种方法.ge......
  • js事件处理
    事件监听letdid=document.getElementById("div-id");监听函数Dom0方式did.onclick=function(e){};Dom2方式did.addEventListener("click",(e)=>{});元素.addEventListener("事件类型",处理函数,处理阶段bool);//处理函数可传入一个唯一的参数事件对象//处理阶段,......