简单理解js防抖与节流

最新推荐文章于 2024-07-20 14:49:34 发布
最新推荐文章于 2024-07-20 14:49:34 发布
阅读量113 收藏 1
点赞数
分类专栏： 前端 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45149366/article/details/119355230
版权

节流和防抖都是为了解决短时间内大量触发某函数导致的性能问题。比如触发频率过高导致响应速度跟不上触发速度，浏览器出现延迟或卡顿现象。
例如监听窗口的滚动条，如果不断的滑动，函数被高频触发，很浪费浏览器的性能。

防抖（throttle）：给一个时间限制，高频事件触发后，在这个限制内，函数只执行一次，如果在这个限制内再次触发函数，时间清零，重新计算时间。

节流（debounce）：给一个时间间隔，高频事件触发后，在这个间隔内，函数只执行一次（每隔一段时间，函数执行一次）

咸鱼翻身不想当咸鱼
关注
专栏目录
js节流
ZiXiaweb的博客
09-20 3012
什么是节流？ 假如在一个页面中有任意多张图片，那么就有可能会使用懒加载技术，懒加载呢就是监听滚动条的位置，那么如果用户一直在滚动，那么事件监听就一直在触发，也是浪费性能。那么节流就是在一定时间间隔内触发一次事件。 函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。 函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。 代码如下： 有两种主流的
谈谈js中的函数节流
weixin_33827590的博客
02-24 82
函数节流的目的 从字面上就可以理解，函数节流就是用来节流函数从而一定程度上优化性能的。例如，DOM 操作比起非DOM 交互需要更多的内存和CPU 时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起，有时候甚至会崩溃。尤其在IE 中使用onresize 事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。在onr...
JavaScript：节流与防抖
最新发布
m0_65029152的博客
07-20 1828
本文主要记录JavaScript中，防抖和节流的相关内容和技术应用；
JS中的节流
weixin_49592687的博客
04-23 1万+
节流相较于防抖来说就简单多了, 用简单的话来说,防抖就是只执行最后一次;那么节流就是控制事件触发的次数接下来还是用代码说话 1. 为什么有节流 首先下面有一段这样的代码 window.addEventListener('scroll',function(){ console.log(123); }); 运行到浏览器中后,就会有这样的情况 每次滚动都会触发这个事件,但是仅仅几秒钟就已经触发了200多次,那如果是和后台交互数据的话,这样的频率和数据量会
js 节流
yuey0809的博客
11-23 257
节流 函数节流就是预定一个函数只有在大于等于执行周期时财智星,周期内调用不执行.好像水滴攒到一定重量才会落下一样. 场景 窗口调整 页面滚动 抢购疯狂点击 function throttle(handle, time) { let lastTime = 0; return function () { let nowTime = +new Date(); if (nowTime - lastTime > time) { handle.apply(this, arguments)
JS——节流
热门推荐
weixin_41246825的博客
03-25 1万+
节流-throttle 拖拽一个元素时，要随时拿到该元素的拖拽位置 直接使用drag事件，则会频繁触发，很容易导致卡顿 节流：无论拖拽速度多快，都会每隔100ms触发一次 // 未封装 const dom1 = document.getElementById('dom1') let timer = null dom1.addEventListener('drag',function (e) { if(timer) { return } timer = setTimeout(() =>
浅析JS防抖和节流
ordnary_jv的博客
03-04 468
带你快速了解抖动和节流
【js小知识】轻松了解js防抖与节流
belloc_li的博客
06-09 649
防抖是回城，节流是平A
彻底搞懂JavaScript防抖与节流
艾编程带你学前端博客
12-14 824
防抖的概念在连续的事件中，只需触发最后一次回调，也就是将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay（延迟）时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。应用场景搜索框输入查询、手机号、邮箱验证输入检测。只需用户最后一次输入完，再发送请求窗口大小resize。只需窗口调整完成后，计算窗口大小，防止重复渲染。什么是节流使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。节流应用场景。
JS中的防抖与节流及作用详解
10-17
在JavaScript中，防抖（debounce）和节流（throttle）是两种常见的优化策略，它们主要用于处理高频触发的事件，如窗口的resize、scroll事件，或者用户输入时的keyup事件等。这两种策略的主要目的是限制函数的执行...
深入了解JavaScript 防抖和节流
10-16
JavaScript中的防抖(debounce)和节流(throttle)是两种常用的优化策略，它们主要用于控制频繁触发的函数调用，以提高性能和用户体验。这两种技术在处理窗口 resize 事件、滚动事件、搜索输入框的实时查询等场景中尤其...
浅析JavaScript 函数防抖和节流
10-15
总之，函数防抖和节流是前端性能优化中的常见技巧，理解它们的原理与适用场景对于编写高性能的前端代码至关重要。在实际开发中，我们要根据具体需求来选择使用防抖还是节流。防抖适合在最后一次输入后才需要触发的...
Vue的click事件防抖和节流处理详解
10-16
在前端开发中，事件处理是极为重要的一部分。随着用户与页面交互的增多，一些事件如...通过本篇文章的分享，希望能够帮助大家理解并掌握Vue中的click事件防抖和节流技术，提升开发效率，同时保证程序的性能和用户体验。
JS中节流函数介绍与实现（秒懂如何手写节流）
百赢出品，必属精品
04-03 2015
它会设置一个时间间隔，只有当两次事件触发的时间间隔超过了这个设定的时间间隔时，才会执行处理函数。如果两次触发事件的时间间隔小于设定的时间间隔，那么处理函数就不会被执行，从而实现了控制函数执行频率的效果。节流函数在实际开发中经常被用来优化高频触发的事件处理，例如在页面滚动、输入框输入等场景下，通过节流来控制函数的执行频率，从而提升页面性能和用户体验。节流函数是一种用于控制函数执行频率的技术。它可以确保函数在一定时间间隔内最多只执行一次，从而避免频繁触发导致性能问题或不必要的资源消耗。基本实现手写防抖函数。
JS中的节流和防抖
y_hh_的博客
08-01 424
前言 在JS中，节流和防抖是两个相似的概念，都是为了限制JS频繁地运行一段代码。但两者还是有一定区别的。 节流 节流的目的是为了防止代码无间断执行，其思想是，在规定时间内改段代码只能执行一次，通过设置标记，根据标记值来表示这段时间内是否有代码执行，如果有，则不重复执行，等待下次触发。如果没有，则将标记置为True，设置定时器，当代码执行完毕后，再将标记位置为False. 代码如下： // 节流 ： 防止某些代码没有间断的执行 function throttle(method, context){
【前端知识之JS】节流知识
weixin_44337386的博客
05-08 1185
本系列主要整理前端面试中需要掌握的知识点。本节介绍节流的相关知识。
js中的节流和防抖
qq_39148344的博客
09-22 402
在学习Element-ui源码的过程中有注意到题目使用的节流防抖居然是引用的一个npm包，而不是自己写的一个utils为什么我会这样想呢，因为在看Data组件的时候E没有使用一些常见的比如moment这样的组件库，我当时还很惊讶，想着E中的程序员就是厉害，什么都自己亲力亲为，后来经过这个事情发现，他们用一些：小，但稳定而不是全部都自己写 throttle-debounce就是其中一个 当我看npm他们的一些API的时候大部分参数还是可以理解的，比如：delaycallback，但是也有一些我无法...
JS中的防抖节流
qq_39378871的博客
07-18 281
1.防抖 JS中的防抖就是在一定时间内，在第一次触发事件的时候，不立刻执行，而是等待一段时间后再执行，这里就要用到定时器来实现了，但是当再次触发事件的时候，定时器又会重新计时，直到在设定的时间内不再触发事件，然后执行事件函数。 代码实现过程如下所示： var input = document.querySelector("input"); //获取input输入框 function antiShake(fn, delay) { //delay为需要设定的时间，fn传入函数
JS防抖与节流技术深度解析
"js防抖和节流的深入讲解" JavaScript中的防抖(debounce)和节流(throttle)是两种常见的优化技术，它们主要用于控制频繁触发的事件，如用户输入、窗口滚动、页面加载等，以避免过度消耗系统资源，提高用户体验。 ##...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值