节流函数-throttle

最新推荐文章于 2024-06-24 17:29:14 发布
最新推荐文章于 2024-06-24 17:29:14 发布
阅读量533 收藏
点赞数
分类专栏： JavaScript学习笔记 前端面试题 文章标签： 节流 throttle javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZWQ0325/article/details/111563208
版权
本文介绍了JavaScript中的节流函数throttle，详细阐述了其功能——减少高频率执行代码的频率，并列举了适用场景如oninput、onresize等。文章对比了节流与防抖的区别，指出防抖会限制为执行一次，而节流则在高频执行中保留多次执行。文章深入讲解了节流的实现原理，通过setTimeout延迟执行，并提供了封装节流工具函数的方法。
摘要由CSDN通过智能技术生成

1. 功能 throttle

和防抖一样都是减少高频率执行代码的执行频率。

2.使用场景

  • oninput
  • onresize
  • onscroll
  • onmousemove
  • onmousehover
  • 等等

3.节流 vs 防抖

  • 防抖：高频执行函数，降低到执行1次
  • 节流：高频执行函数，降低到执行n次，1 < n < 高频次数

3.节流原理

3.1 利用 setTimeout 延迟执行逻辑代码。在防抖的基础上添加变量，降低 clearTimeout 频率，增加执行次数。

  let timer = null;
  let flag = true;
  element2.onmousemove = (event) => {
   
    if (
最低0.47元/天 解锁文章
好_快
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
throttle节流函数
qq_38985444的博客
07-09 191
添加链接描述
JavaScript 节流函数 Throttle 详解
10-22
JavaScript中的节流函数Throttle是一种优化技术，用于限制函数的执行频率，特别是在处理与用户交互频繁的事件，如resize、scroll或mousemove时。当事件触发过于频繁，可能会导致性能问题，因为频繁执行的函数可能...
throttle（节流）
weixin_45437417的博客
09-22 158
节流常应用于鼠标不断点击触发、监听滚动事件 const throttle = (fn, time) => { let flag = true; return function() { if (!flag) return; flag = false; setTimeout(() => { fn.apply(this, arguments); flag = true; }, time); } } ...
JS魔法堂：函数节流（throttle）与函数去抖（debounce）
最新发布
2301_82241847的博客
06-24 567
如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。也就是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。接口定义：/**频率控制 返回函数连续调用时，action 执行频率限定为 次 / delay@param delay {number} 延迟时间，单位毫秒@param action {function} 请求关联函数，实际应用需要调用的函数@return {function} 返回客户调用函数。
节流(throttle)
weixin_45113879的博客
04-19 607
节流(throttle) 　指连续触发事件但是在 n 秒中只执行一次函数。即 2n 秒内执行 2 次… 。节流如字面意思，会稀释函数的执行频率。 // 时间戳版 function throttle(func, wait) { let previous = 0; return function() { let now = Date.now(); let context = this; let args = arguments; if (now -
函数的节流(throttle)
song17631538490的博客
12-27 1510
浏览器中某些计算和处理要比其他的昂贵的多。例如，DOM操作比起非DOM交互需要更多的内存和CPU时间。连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候甚至会崩溃。为了绕开这个问题，你可以使用定时器对该函数进行节流操作。我们应该可以很容易的发现，其实时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。通过以上操作就可以实现函数的节流(throttle)。
详解JavaScript节流函数中的Throttle
10-21
JavaScript中的函数节流技术，尤其是Throttle函数，是一种优化策略，用于限制函数的执行频率，以提高性能并避免过度消耗资源。它常被应用于处理高频触发的事件，如`resize`、`scroll`和`mousemove`等。这些事件在...
前端项目-jquery-throttle-debounce.zip
09-03
"前端项目-jquery-throttle-debounce.zip" 是一个专注于这一目标的项目，它利用 jQuery 的扩展插件实现了防抖（throttle）和节流（debounce）功能。接下来，我们将深入探讨这两个概念及其在实际应用中的价值。 **...
strict-throttle:严格延迟（速率限制）函数调用的执行
05-10
严格的油门严格延迟（速率限制）函数调用的执行，以确保函数调用的执行时间不超过给定间隔内提供的限制时间。 严格的节流阀在滚动窗口中运行，因此在等于interval的任何时间段内，执行的调用不得超过限制调用。安装$...
节流处理（throttle）
weixin_54362381的博客
11-26 446
关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。 一、使用时间戳 让我们来看第一种方法：使用时间戳。 当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。 // fn 是需要执行的函数 // wait 是时间间隔 const throttle = (fn, wait = 50) => { // 上一次执行 fn 的时间 let previous =
节流（Throttle）
m0_63548381的博客
02-29 1412
节流是一种前端优化事件处理性能的技术，主要用于控制一段时间内某个函数的执行频率，确保该函数不会因为频繁触发而过于密集地被执行。如果事件连续快速地被触发多次，节流函数会限制执行次数，在规定的时间间隔内只执行一次。
节流（throttle）
weixin_52148548的博客
06-08 951
原理：n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效代码： 节流的分类 节流分为时间戳和定时器两种。时间戳版：index.html文件： throttle.js文件： 定时器版：index.html文件同上 throttle.js文件： 时间戳和定时器双剑合璧版： index.html文件同上 throttle.js文件： 完整优化版： index.html文件同上 throttle.js文件：...
浅谈JavaScript的函数节流
shengxiaokui的专栏
12-17 413
什么是函数节流？       介绍前，先说下背景。在前端开发中，有时会为页面绑定resize事件，或者为一个页面元素绑定拖拽事件（其核心就是绑定mousemove），这种事件有一个特点，就是用户不必特地捣乱，他在一个正常的操作中，都有可能在一个短的时间内触发非常多次事件绑定程序。而大家知道，DOM操作时很消耗性能的，这个时候，如果你为这些事件绑定一些操作DOM节点的操作的话，那就会引发大量的计算
深入浅出节流函数 throttle
chern1992的博客
06-17 1339
引言 上一节我们详细聊了聊高阶函数之柯里化，通过介绍其定义和三种柯里化应用，并在最后实现了一个通用的 currying 函数。这一小节会继续之前的篇幅聊聊函数节流 throttle，给出这种高阶函数的定义、实现原理以及在 underscore 中的实现，欢迎大家拍砖。 有什么想法或者意见都可以在评论区留言，下图是本文的思维导图，高清思维导图和更多文章请看我的Github。 #定义及解读 函数节流指的是某个函数在一定时间间隔内（例如 3 秒）只执行一次，在这 3 秒内无视后来产生的函数调用请求..
throttle节流
zzz祝晴雨的博客
06-18 128
throttle(method, delay, duration) { let timer = null let begin = new Date().getTime() return function() { let cur = new Date().getTime() clearTimeout(timer) if(cur - begin >= duration) { method() begin = cur } else { timer = setTimeout(function () { me
详解防抖函数（debounce）和节流函数（throttle）
dksks130的博客
12-06 9017
详解防抖函数（debounce）和节流函数（throttle）
JavaScript使用函数实现防抖和节流
前端应知应会
09-16 233
函数防抖(debounce)： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。 使用vue实现防抖操作 <input type="text" class="input" v-model="searchText" @keyup="debounce"/> var timer = undefined debounce: function(){ let that = this if(time
前端性能优化——节流（throttle）
Mr.chen的博客
08-27 4174
前端性能优化——节流（throttle） 一、定义： 一个函数执行一次后，在只有大于设定的执行周期后才执行第二次，假设有个需要频繁触发的函数，处于性能优化角度，在规定的时间内，只让函数的第一次生效，后面的不生效，大于设定时间后，再生效。 二、使用场景： 上拉加载，滚动条，等等 三、代码： <!DOCTYPE html> <html lang="en"> <he...
async await配合节流函数
09-17
async await配合节流函数可以实现在异步操作中控制函数的执行频率，避免频繁触发函数执行。 使用async await配合节流函数的步骤如下： 1. 创建一个节流函数，例如Throttle，它可以控制函数的执行频率。 2. 在异步函数中使用await关键字等待一段时间后执行函数。 3. 在需要频繁执行的函数中调用节流函数，控制函数的执行频率。 示例代码如下所示： ```javascript // 创建一个节流函数 function Throttle(fn, delay) { let timer = null; return async function(...args) { if (!timer) { timer = setTimeout(function() { fn.apply(this, args); timer = null; }, delay); } }; } // 异步函数 async function asyncFunction() { // 等待一段时间后执行函数 await new Promise(resolve => setTimeout(resolve, 1000)); console.log('执行异步操作'); } // 需要频繁执行的函数 const throttledFunction = Throttle(asyncFunction, 500); // 调用节流函数控制函数的执行频率 throttledFunction(); throttledFunction(); throttledFunction(); ``` 以上代码中，Throttle函数用于创建一个节流函数，控制函数的执行频率。asyncFunction是一个异步函数，使用await关键字等待一段时间后执行函数。通过调用Throttle函数，将asyncFunction包装成一个可以控制执行频率的函数throttledFunction。在调用throttledFunction时，函数的执行会受到节流函数的限制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值