JS高级 节流函数 throttle

最新推荐文章于 2024-04-19 16:56:12 发布
最新推荐文章于 2024-04-19 16:56:12 发布
阅读量216 收藏
点赞数
分类专栏： JS高级 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64355119/article/details/130518504
版权

场景：点击一下按钮，就会发送一次请求，点得越快，发送得越快，
现在希望点得不管多快，都匀速发送请求
解决方案：使用节流函数 throttle

节流函数实现方式一：使用setTimeout
思路：定义一个flag，给它赋值false，一点击，就会给flag赋值为true，并开启定时器，
           在定时器没有触发之前，flag一直都是true，那么一进入点击事件，就会进入到if里面去，
           然后函数就return出去了，并不会开启新的定时器，当定时器执行完成后，flag会被赋值为false，
           那么再次进入点击事件的时候，就会再次开启一个定时器

 

节流函数实现方式二：利用时间戳进行判断
思路：先定义一个旧的事件变量，在点击按钮一个，再声明一个新的事件变量，
           当新的时间戳减去旧的时间戳大于一定时间的时候，才去发送请求，
           发送请求之后，将新的时间变量赋值给旧的时间变量 

 

 

Cutterman
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 节流函数 Throttle 详解
10-22
JavaScript中的节流函数Throttle是一种优化技术，用于限制函数的执行频率，特别是在处理与用户交互频繁的事件，如resize、scroll或mousemove时。当事件触发过于频繁，可能会导致性能问题，因为频繁执行的函数可能...
JS进阶篇1---函数节流（throttle）
ximenxiafeng的专栏
12-08 1366
JS中的函数节流 一、什么是函数节流（throttle） 概念：限制一个函数在一定时间内只能执行一次。 举个栗子，坐火车或地铁，过安检的时候，在一定时间（例如10秒）内，只允许一个乘客通过安检入口，以配合安检人员完成安检工作。上例中，每10秒内，仅允许一位乘客通过，分析可知，“函数节流”的要点在于，在一定时间之内，限制一个动作只执行一次。 二、为什么需要函数节流 　　前端开发...
js函数节流（Throttle）
Rey
09-30 4043
在浏览器 DOM 事件里面，有一些事件会随着用户的操作不间断触发。比如：重新调整浏览器窗口大小（resize），浏览器页面滚动（scroll），鼠标移动（mousemove）。也就是说用户在触发这些浏览器操作的时候，如果脚本里面绑定了对应的事件处理方法，这个方法就不停的触发。而当事件处理比较复杂的时候浏览器不断执行计算，从而导致浏览器性能降低甚至卡死，影响用户体验。下面我们就针对这一情况做函数的节...
JS魔法堂：函数节流（throttle）与函数去抖（debounce）
最新发布
2401_84092068的博客
04-19 1024
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题）**[外链图片转存中…(img-51SJpetQ-1713516906680)]
js 函数的防抖(debounce)与节流(throttle)
m0_74293254的博客
11-25 1219
序言：序言：我们在平时开发的时候，会有很多场景会频繁触发事件，比如说搜索框实时发请求，onmousemove, resize, onscroll等等，有些时候，我们并不能或者不想频繁触发事件，咋办呢？这时候就应该用到函数防抖和函数节流了！防抖（debounce）防抖（debounce）是指在一定时间内，只执行最后一次触发的事件。它适用于那些在连续触发事件的过程中，只关心最后一次触发的结果的情况。例如，当用户连续输入搜索关键字时，我们可以使用防抖来减少网络请求的次数。
JS魔法堂：函数节流（throttle）与函数去抖（debounce）(1)
2401_84091742的博客
04-04 418
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取最后整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取。
手撕JS——节流throttle
果冻
03-15 1556
节流（throttle）:不管事件触发频率多高，只在单位时间内执行一次。 既该事件不会重复触发，与防抖最大的区别
Javascript节流函数throttle和防抖函数debounce
01-18
问题的引出 　在一些场景往往由于事件频繁被触发，因而频繁地进行DOM操作、资源加载，导致UI停顿甚至浏览器...在现在很多的javascript框架中都提供了这两个函数。例如 jquery中有throttle和debounce插件， underscore.j
详解JavaScript节流函数中的Throttle
10-21
JavaScript中的函数节流技术，尤其是Throttle函数，是一种优化策略，用于限制函数的执行频率，以提高性能并避免过度消耗资源。它常被应用于处理高频触发的事件，如`resize`、`scroll`和`mousemove`等。这些事件在...
javascript函数的节流[throttle]与防抖[debounce]
10-19
以下是一个简单的节流函数实现： ```javascript function throttle(method, delay) { let timeoutId; let lastExecuteTime = 0; return function(...args) { const now = Date.now(); const remainingTime = ...
JS中的节流函数throttle的理解与封装
weixin_47342624的博客
09-23 1161
/ 1.记录上次触发时间，第一次默认为0// 2. 实现节流的处理函数// 3. 获取每次触发当前时间// 4. 获取下次触发节流响应函数的剩余时间// 5. 当下次触发响应函数时间小于0时，说明达到节流时间间隔，执行函数// 绑定需要节流的时间this，以及传递的参数// 保留本次执行后的当前时间，供下次触发时做处理判断}}// 返回节流函数}
js 函数防抖（debounce）函数节流（throttle）
qq_27009517的博客
07-01 4246
一、什么是函数节流（throttle） 概念：限制一个函数在一定时间内只能执行一次。 举个栗子，坐火车或地铁，过安检的时候，在一定时间（例如10秒）内，只允许一个乘客通过安检入口，以配合安检人员完成安检工作。上例中，每10秒内，仅允许一位乘客通过，分析可知，“函数节流”的要点在于，在一定时间之内，限制一个动作只执行一次。 上图中绿色块表示触发一次事件，持续触发事件时，throttle会合并一定时间内的事件，并在该时间结束时真正去触发一次事件 二、为什么需要函数节流 　　前端开发过程中...
js 实现一个throttle节流函数
baidu_33164415的博客
12-05 373
这种实现有一个问题就是最后一次动作会不执行，假设delay是1s，当我们第1.5s就不再触发的时候，实际上，我们只是在第0s，也就是第一次触发时候执行来，然后在第1s时候又执行了一次，但是我们其实是1.5s才停止的。一般用于监听滚动事件等情况。当我们某个动作执行的很频繁，需要限制它执行的频率的时候，就可以使用节流函数。节流是指每隔一段时间，我们只执行一次动作。
js 函数防抖(debounce)与节流(throttle)
青蛙king的博客
07-21 3745
一、函数防抖 二、函数节流
JS手写节流（throttle）函数
OnTheRoad_ING的博客
04-22 188
【代码】JS手写-节流。
JS编程实现-throttle(节流)
Markson_1的博客
01-12 301
// 对fn进行节流处理 let throttle = function (fn, wait) { let firstTime = true, timer = null return function () { let _this = this if (firstTime) { fn.apply(_this, ...
JavaScript 节流函数 throttle 详解
weixin_34381666的博客
06-26 1131
原文：https://keelii.github.io/2016/06/11/javascript-throttle/ 在浏览器 DOM 事件里面，有一些事件会随着用户的操作不间断触发。比如：重新调整浏览器窗口大小（resize），浏览器页面滚动（scroll），鼠标移动（mousemove）。也就是说用户在触发这些浏览器操作的时候，如果...
快速应对面试中的防抖和节流函数！
Wsh20210301的博客
08-07 220
触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间
Js实现防抖函数喝节流函数
03-31
当我们在JavaScript中处理一些频繁触发的事件时，比如窗口调整大小、滚动等，防抖函数和节流函数可以帮助我们优化性能。 防抖函数（Debounce）是指在事件触发后等待一段时间后再执行回调函数，如果在等待时间内再次...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值