JavaScript节流 防抖

JavaScript节流 防抖说明 此文章仅供参考和学习使用 转载请注明出处 1 防抖 阻止一个函数在很短的时间间隔内连续调用 只有在上一次函数调用执行后达到规定的时间间隔 才能进行下一次调用 但要保证一个一个累计最小调用的时间 相当于将若干函数的调用 合并为在某个固定的时间间隔内的一次函数的调用 只要不是最后一次触发 就不异步执行请求 应用场景 函数节流一般用于 onresize onscroll 等短时间内会多

说明:此文章仅供参考和学习使用,转载请注明出处。
1.防抖:阻止一个函数在很短的时间间隔内连续调用。只有在上一次函数调用执行后达到规定的时间间隔,才能进行下一次调用,但要保证一个一个累计最小调用的时间。相当于将若干函数的调用,合并为在某个固定的时间间隔内的一次函数的调用,只要不是最后一次触发,就不异步执行请求。
应用场景: 函数节流一般用于,onresize,onscroll等短时间内会多次触发的事件。
实现原理: 当触发一个事件时,先用一次性定时器setTimeout让这个事件延迟一小段事件再执行。如果这个事件间隔内又触发了该事件,则clearTimeout清除原来的定时器,再setTimeout一个新的定时器重复以上步骤。
2.实现过程:为了方便大家理解,因此代码分为两部分,一部分为基础写法,一部分为重构后的写法,两种都是一样的。








 
   
    
     
     Document 
      
      
     
    
  
 
   
    
     
     Document 
      
      
     
    
  

实现效果:
未开启节流之前:
在这里插入图片描述
没点击一次,btn提交一次请求。
开启节流效果之后:
在这里插入图片描述
在这里插入图片描述
每隔两秒之后,请求返回后才执行下一次点击事件,期间点击按钮触发的其他事件都未执行。
6.节流和防抖的区别:
防抖:只要不是最后一次触发,就不异步执行请求
节流:第一次发送请求后,只要响应没回来,就不能发送第二次请求。




















版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/199120.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月26日 下午1:49
下一篇 2026年3月26日 下午1:49


相关推荐

  • Python学习【第五篇】循环语句「建议收藏」

    Python学习【第五篇】循环语句「建议收藏」Python循环语句接下来将介绍Python的循环语句,程序在一般情况下是按顺序执行的。编程语言提供了各种控制结构,允许更复杂的执行路径。循环语句允许我们执行一个语句或语句组多次。Python

    2022年7月5日
    18
  • 微分方程的求解方法

    微分方程的求解方法文章目录前言 首先介绍一些关于微分方程的概念 在考研范围内的微分方程有哪几类 微分方程的求解方法 1 一阶微分方程的求解 可分离变量型的解法 齐次型的解法 一阶线性型的解法 重难点 2 二阶可降阶微分方程的求解 3 高阶常系数线性微分方程的求解前言本文主要介绍了考研范围的微分方程的求解类型及对应的求解方法 主要内容参考自张宇 闭关修炼 希望本文对您有所帮助 首先介绍一些关于微分方程的概念一阶是什么 一阶微分方程就是指只有一阶导数或微分的微分方程 注 阶数是微分方程中含有的导数或微分的

    2026年3月18日
    2
  • stc12c5a60s2功能说明(STC12C5A60S2默认触发)

    最近学习一下SD卡的驱动,网上程序的版本很多,使用的MCU和SD卡的型号千奇百怪,学起来反而没有方向,感觉上乱七八糟的,直到现在,才直到我们平常说的SD卡实际上有很多中类别。0到2G的SD卡,最普通的卡;2G到32G的SDHC卡,也就是现在最常用的大容量SD卡;还有我没有见过的SDXC卡,容量好像在32G以上。同时还有手机上的TF卡,实际上也是SD卡只不过做工不同而已,MMC卡。学习的时候走了很

    2022年4月12日
    57
  • 成年人最大的悲哀,就是突然读懂了鲁迅

    原文始发于微信公众号():成年人最大的悲哀,就是突然读懂了鲁迅

    2021年6月21日
    99
  • 从零开始部署CloudSim4.0云计算仿真平台「建议收藏」

    从零开始部署CloudSim4.0云计算仿真平台「建议收藏」从零开始部署云计算仿真平台软件CloudSim4.0

    2022年10月7日
    6
  • 逻辑漏洞思维导图

    逻辑漏洞思维导图逻辑漏洞思维导图逻辑漏洞,是因为代码之后是人的逻辑,人更容易犯错,是编写完程序后随着人的思维逻辑产生的不足。sql注入、xss等漏洞可以通过安全框架等避免,这种攻击流量非法,对原始程序进行了破坏,防火墙可以检测,而逻辑漏洞是通过合法合理的方式达到破坏,比如密码找回由于程序设计不足,会产生很多问题,破坏方式并非向程预防思路。…

    2022年5月30日
    38

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号