首页 > 其他分享 >js手写:防抖&节流 逐行代码解析

js手写:防抖&节流 逐行代码解析

时间:2024-11-01 17:21:24浏览次数:3  
标签:防抖 调用 节流 js 定时器 参数 等待 逐行

差异分析

刚开始写节流的时候,没有真正理解其难点,而且网上的防抖和节流函数,不得不说,真的是鱼龙混杂,有些看了简直添乱。

        之前一直认为节流就是“时间间隔T内,点击一个按钮n次,只执行第1和n次”,完全没有体会到节流的难点其实在于多次相同的调用时传递的不同的!参数!

防抖相对节流稍微简单一点,触发函数后只有在时间段n内没有再次被触发函数才会被执行。

打个比方

这里写的格式是:参数(传入时刻)

A(1)        B(2)        C(3)        D(4)        E(6)        F(7)        G(11)        H(12)

设置间隔时间为3个单位时间

那么防抖后的输出结果就会是:F(10)        H(15)

节流后的输出结果就会是: A(1)        D(4)        F(7)        G(11)        H(14)

所以实际上节流和防抖的n次调用都是完全不同的调用,如果不把这n次调用的作用域和参数分析出来,我认为是很难震真正理解节流的。

节流

思路解析

        那么做这个节流就不仅仅是定时器的问题,有几个问题需要处理:

        如何判断你这个是不是第一次执行(也就是没有等待时间的)?

        A时刻经过第一次调用的函数,在被B调用后,已经处于B调用的等待之中,如果又被C调用,那么结束A创建的定时器的时候,需要真正调用的就是C的参数,参数的置换如何完成?

        结束长期等待之后的新一轮调用,如何和‘第一次调用“区分开?(也就是如何体面的结束定时器

        当然现在节流有很多实现方式,我这里只谈这一种,具体思路其实就两点:从【等待中/非等待中】两种状态的处理对整个函数运行进行大的调控,以及使用变量接收此时此刻的参数并且在定时器的回调中实时更新。

        那么对于等待中和非等待中,我们又应该做什么呢?

        非等待中被调用,直接执行函数,并且设置定时器,将状态切换成等待中

        等待中,只需要切换此时定时器回调函数中即将调用的原函数的参数即可。

整体代码如下

代码

我做这个的时候有个大佬说,节流的亮点在于闭包的使用。在我没搞懂这个东西的时候其实没听懂。等将这个代码写出来再看这句话,嗯,确实很有道理

防抖

思路解析

防抖相对而言就简单多了,检测此时有没有定时器,没有就创建定时器,有就重置定时器。相较于防抖,他不需要考虑定时器中参数置换的问题,谁创建,参数就一定是谁。

代码

标签:防抖,调用,节流,js,定时器,参数,等待,逐行
From: https://blog.csdn.net/m0_74117421/article/details/143428948

相关文章

  • NodeJS动漫论坛-计算机毕业设计源码09947
    基于微信小程序的动漫论坛摘 要随着移动互联网的飞速发展,智能手机和移动互联网已经成为人们日常生活中不可或缺的一部分。在这样的背景下,微信小程序应运而生,凭借其无需下载安装、即用即走的特点,迅速成为连接用户与服务的桥梁。动漫作为一种深受年轻人喜爱的文化形式,拥有庞......
  • 用文字“画出”时序图:用 AI+Mermaid.js 解决交互过程中的问题
    什么是时序图序列图是一种用于描述对象之间在时间上的交互顺序的图表。它可以展示对象之间是如何相互作用的,以及这些交互的顺序。什么是MermaidMermaid.js是一个开源项目,它允许你通过简单的文本代码来绘制图表。无论你是开发者、学生还是普通用户,它都能帮助你将复杂的信息以......
  • JS里的this
    用来访问对象的this不可靠的外部变量名访问letuser={name:"John",age:30,sayHi(){alert(user.name);//"user"外部变量名}};user.sayHi();//TypeError:Cannotreadproperty'name'ofnull如果我们决定将user复制给另一个变量,例如admin......
  • 基于nodejs+vue基于的农贸市场网站的设计与实现[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于农贸市场网站的设计与实现问题的研究,现有研究主要以农贸市场的实体运营、传统管理模式为主,专门针对基于特定功能的农贸市场网站设计与实现的研究较......
  • 基于nodejs+vue基于的汽车租赁系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于汽车租赁系统的研究,现有研究多集中在系统的基本功能构建与运营模式方面,如迪蒙汽车租赁系统,其主要关注如何通过多网融合来拓展业务模式,提高运营效率......
  • 基于nodejs+vue基于的社区问答网站与设计[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于社区问答网站的研究,现有研究多集中在其社交性和信息传播方面1。在国外,社区问答网站发展较早,技术和运营模式相对成熟,注重用户体验和信息的个性化推荐......
  • 【昌哥IT课堂】MySQL8.3 EXPLAIN中的新JSON格式(译)
    MySQL提供了两个用于分析查询计划的强大工具:EXPLAIN和EXPLAINANALYZE。EXPLAIN显示优化器选择的执行计划,并在执行之前停止,而EXPLAINANALYZE实际执行查询并收集有关每个操作的处理时间和返回行数的统计信息。输出格式可以是表格形式(TRADITIONAL)、树形结构或JSON。前两种格式适用......
  • 学习threejs,导入OBJ格式和MTL的格式的模型
    ......
  • 构建Node.js的应用镜像
    在现代软件开发中,Docker已成为构建和部署应用的重要工具。今天,我们将深入探讨如何优化一个Node.js应用的Dockerfile,以支持多版本、多语言,并保持构建环境的干净。首先,让我们看看我们的基础Dockerfile:#构建阶段:使用Node.js16和DebianBuster作为基础镜像FROMno......
  • 基于node.js+vue基于Android的答疑预约系统的设计与实现前(开题+程序+论文)计算机毕业设
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容选题背景关于答疑预约的研究,现有研究主要集中在传统的线下答疑预约或者基于网页端的答疑预约方式,专门针对基于Android平台的答疑预约系统的研究较少。随着移动设备的......