函数节流介绍

最新推荐文章于 2024-09-23 13:53:25 发布

原创最新推荐文章于 2024-09-23 13:53:25 发布 · 423 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

收录于

本文深入讲解了函数节流的概念，探讨了高频事件如滚动、鼠标移入等对网页性能的影响，以及如何通过函数节流来限制事件处理函数的执行周期，从而提升网页响应速度和用户体验。文章详细解释了函数节流的实现原理和具体步骤。

函数节流

函数节流介绍

1、先理解什么是高频事件
高频事件就是js中由于用户的快速操作导致短时间极高的触发频率，例如滚动事件onscoll,鼠标移入onmouseover,网页大小变化onresize,点击onclick等等

2、高频事件的危害
a、浪费资源，降低网页速度，甚至导致浏览器卡死
b、网络堵塞，如果在高频事件中，进行了重复的ajax请求，会导致请求数据混乱，并且还占用服务器带宽增加服务器压力（间接增加服务器成本）

3、函数节流介绍
函数节流：限制事件处理函数的执行周期。
例如：鼠标点击事件，限制0.5s内只能被触发一次。无论你点击有多快，0.5s也只会执行一次。

解决思路

1.声明变量记录上一次触发时间（默认为0，保证事件第一次无条件触发）
2.触发时间时：判断现在的时间和上一次时间的间隔是否大于节流间隔
3.成功触发后：将现在的时间变成下一次时间的参考时间
总体思路：声明一个变量作为节流初始值，设置节流条件，判断是否满足节流条件，不满足则不让事件继续进行

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

即将拥有人鱼线彭于晏

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

JS中节流函数介绍与实现（秒懂如何手写节流）

百赢出品，必属精品

04-03

2591

它会设置一个时间间隔，只有当两次事件触发的时间间隔超过了这个设定的时间间隔时，才会执行处理函数。如果两次触发事件的时间间隔小于设定的时间间隔，那么处理函数就不会被执行，从而实现了控制函数执行频率的效果。节流函数在实际开发中经常被用来优化高频触发的事件处理，例如在页面滚动、输入框输入等场景下，通过节流来控制函数的执行频率，从而提升页面性能和用户体验。节流函数是一种用于控制函数执行频率的技术。它可以确保函数在一定时间间隔内最多只执行一次，从而避免频繁触发导致性能问题或不必要的资源消耗。基本实现手写防抖函数。

1 条评论您还未登录，请先登录后发表或查看评论

函数节流

scorpio的世界

08-10

3000

浏览器中某些计算和处理要比其他的昂贵很多，例如DOM操作、AJAX请求等。函数节流的基本思想是，某些代码不可以没有间断的情况下连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后 ...

函数节流详解

田兴的博客

11-05

3829

一、什么是函数节流（throttle）首先函数节流的概念是什么？限制一个函数在一定时间内只能执行一次。举个栗子：接下来，我给大家举个栗子，。二、为什么需要函数节流前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很

函数节流、函数防抖

m0_57142556的博客

06-17

2506

函数节流、函数防抖首先，我们要知道：函数节流和函数防抖两个都是优化高频率执行js代码的一种手段。一、它们的基本概念如下：函数节流：在一定时间内js方法只跑一次(比如人的眨眼睛，就是一定时间内眨一次)。这是函数节流最形象的解释;函数防抖：指频繁触发的情况下，只有足够的空闲时间，才执行代码一次(比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车)； =================================================

JS高级——节流函数

热门推荐

@SCY

02-26

1万+

在某个时间内（比如500ms），某个函数只能被触发一次；过程：当事件触发时，相应的函数并不会立即触发，按照一定的频率去执行默认情况下，我们的防抖函数最后一次是不会执行的因为没有达到最终的时间，也就是条件满足不了的但是，如果我们希望它最后一次是可以执行的，那么我们可以让其传入对应的参数来控制我们来看一下代码如何实现：我们增加了else语句：所以我们可以使用timer变量来记录定时器是否已经开启已经开启的情况下，不需要开启另外一个定时器了else语句表示没有立即执行的情况下，就会开启定时器；

函数的节流(throttle)

song17631538490的博客

12-27

1829

浏览器中某些计算和处理要比其他的昂贵的多。例如，DOM操作比起非DOM交互需要更多的内存和CPU时间。连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候甚至会崩溃。为了绕开这个问题，你可以使用定时器对该函数进行节流操作。我们应该可以很容易的发现，其实时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。通过以上操作就可以实现函数的节流(throttle)。

Javascript防抖函数节流函数的介绍(最详细)、彻底搞懂防抖节流的区别以及使用第三方库的防抖节流函数

m0_71485750的博客

07-07

1475

什么是防抖节流函数, 我先举个例子给大家防抖的例子: 比如你给一个女生发消息, 当五分钟内她没有回复, 你就会把她好友删除如果5分钟内她有回复你, 你回给她回一个消息并且又开始5分钟的等待如果有等待超过5分钟, 她还没有恢复你消息, 你就会把这个女生的好友删除节流的例子: 比如有一个男生, 他给女孩子发消息, 在五分钟内不管男生发了多少消息, 女生只会回复一条回复完之后, 男生在下一个5分钟又发了很多很多消息, 女生还是只回复一条, 每一个五分钟都如此, 女生只回复一条消息直到有一天男孩死

函数防抖和函数节流的简单介绍

qq_37734787的博客

06-16

248

函数防抖主要使用场景是输入框输入后才发送请求 // 未封装写法 var t = null; window.onscroll = function () { clearTimeout(t); t = setTimeout(function () { console.log("调用一次"); }, 500); }; // 封装写法好处，既可以定义时间，也可以避免t变量的全局污染 function debounce(callba

什么是函数节流？介绍一下应用场景和原理？

m0_64620776的博客

07-09

399

【代码】什么是函数节流？介绍一下应用场景和原理？

函数防抖与节流区别及应用场景介绍

weixin_47198024的博客

06-27

719

1.函数防抖：用户多次触发事件，以最后一次触发为准 2.函数节流 : 限制事件的执行周期 (500ms内只会执行一次) 3.函数防抖与函数节流异同点与应用场景 (1) 相同点：都是为了优化js代码执行频率，提高代码性能 (2) 不同点：函数防抖：由用户需求决定 a. 鼠标移入移出：用户快速移动鼠标，应该等用户结束移动后，以最后一次为主 b. 输入框事件 :

JS（12），详细介绍并手写防抖和节流函数

wsz123456wsz的博客

02-11

194

防抖和节流

防抖函数节流函数

weixin_34195142的博客

05-30

470

节流函数所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。 function throttle(fun, delay){ let pre = Date.now() return function() { let now = Date.now() let arg = arguments if (now - pre > ...

JS防抖和节流函数

最新发布

少年的范儿的博客

09-23

1037

js的防抖和节流函数实例说明

JS函数节流和函数防抖

xcxiang的博客

03-20

210

1、函数防抖概念：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。生活中的实例：如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。 function debounce(fn, wait) { var timer = null; return functio...

如何理解js中的函数节流和防抖

weixin_43443341的博客

06-19

246

比如：浏览器窗口的变化resize事件，元素的鼠标悬浮mouseover事件，多数据页面的滚动scroll事件等等。这些事件处理不当，高频触发回调函数过重，很容易导致浏览器的卡顿，假死现象，当然了，特别是针对IE。针对这类情况，通常使用函数节流和函数防抖对其进行优化。函数节流代码每隔一段时间执行一次 var canRun = true document.getElementById('xxx'...

【JS】函数防抖和节流

Skywen天问信息

12-03

545

【JS】函数防抖和节流函数防抖在一定时间间隔内只触发最后一次函数应用情况 1.点击按钮触发 2.搜索框输入时触发的请求代码实现 export default function(func, wait, immediate) {//防抖函数 let timeout return function(...args) { clearTimeout(timeout) timeout = setTimeout(() => { timeout = null

JavaScript函数防抖节流

xiaoYuJavaScript的博客

11-18

194

函数防抖 /* 防抖: @params: func[function]:最后要触发执行的函数 wait[number]:频繁设定的界限 immediate[boolean]:默认多次操作，我们识别的是最后一次，但是immediate=true，让其识别第一次 @return 可以被调用执行的函数 */ function debounce(func,wait = 300,immedia

函数防抖and函数节流

qq_45679015的博客

06-03

156

函数防抖函数防抖，这里的抖动就是执行的意思，而一般的抖动都是持续的，多次的。假设函数持续多次执行，我们希望让它冷静下来再执行。也就是当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行。函数防抖的场景 • 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖 • 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖 • 文本编辑器实时保存，当无任何更改操作一秒后进行保存函数防抖的实现 function deb

防抖节流_Javascript中函数防抖与节流

weixin_39914868的博客

01-13

113

函数防抖和节流平时很多应用场景需要用到防抖和节流，面试时候也基本会问到，这里总结一下。防抖在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。直接上代码<body> <div id='app'> <button class="button" @click='clickMe'>clickMe</button> ...