关于防抖，节流问题

最新推荐文章于 2022-06-10 22:17:12 发布
最新推荐文章于 2022-06-10 22:17:12 发布
阅读量112 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52211766/article/details/119456262
版权

防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。

防抖：短时间内多次请求，只执行之后一次。通过延时器来延迟程序的执行，并且在延时器内部清除上一次生成的延时器。

应用场景：input输入框

节流：规定时间内，只触发一次。比如我们设定500ms，在这个时间内，无论点击按钮多少次，它都只会触发一次。

应用场景：浏览器滚动，点击过快。可以是抢购时候，由于有无数人 快速点击按钮，如果每次点击都发送请求，就会给服务器造成巨大的压力，但是我们进行节流后，就会大大减少请求的次数。

目的：减少对服务器的请求压力。

节流和防抖大致相同，不同点在于：

  • 防抖是“随机应变”，以密集的事件触发处的末尾为下一次事件触发的计时开始处
  • 节流是“铁打不动”，始终以第一次事件触发为起始点，忽略 time 时间内的所有事件，第一次事件发生 time 事件之后触发第二次事件

小鱼有肉吃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
防抖和节流
weixin_52566832的博客
07-05 55
例如，当我们拖动网页上的滚动条时，会不断触发 onscroll 事件，如果每次触发都去计算滚动距离，会造成浏览器性能下降。如果在 delay 时间内再次触发事件，就会清除之前的定时器并设置一个新的定时器，直到 delay 时间内不再触发事件，定时器到达时间后执行传入的函数 func。后开启一个定时器，如果事件在定时器限定的时间内再次触发，则清除定时器，在写一个定时器，定时时间到则触发。每次触发事件时，如果定时器不存在，就设置一个定时器，并在 delay 时间后执行传入的函数 func。
防抖和节流之个人理解
最新发布
byyourself10的博客
12-18 380
防抖和节流是前端开发中常用的两种性能优化技术。防抖 (Debouncing) 的含义是指在一定时间内，多次触发同一个事件，只执行最后一次操作。例如，当我们在搜索框中输入关键词时，输入框会不断触发 oninput 事件，如果每次输入都去请求服务器获取数据，会造成不必要的请求浪费。此时就可以使用防抖技术，将一定时间内的多次触发合并为一次操作，只请求一次服务器数据，减少了请求次数和服务器负载。节流 (Throttling) 的含义是指在一定时间内，多次触发同一个事件，只执行第一次操作。
防抖与节流的理解
Smile_666666的博客
12-06 526
防抖与节流的理解 一、防抖 1、定义：规定函数至少间隔多久执行，在n秒内再次被触发，则重新计时，在规定的时间内多次被执行，只会执行一次（可以理解防抖是将多次执行变为最后一次执行） 2、作用：防止事件触发太频繁，浏览器来不及处理，导致页面出现卡顿 3、 适用的场景： 按钮提交时候：多次提交按钮的，可以实现只执行最后一次提交事件 搜索框搜索事件，当多次输入时，等输入后再一次性触发搜索事件 4、例子：例如在搜索时候，等用户全部输入后，再调用搜索事件，不是每一次输入一个字符就触发搜索事件； 5、实现： 利用闭
节流和防抖
weixin_43655631的博客
07-31 120
实现一个节流函数 规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。 鼠标不断点击触发，mousedown(单位时间内只触发一次) 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断 function throttle (fn, delay) { // 利用闭包保存时间 let prev = Date.now() retu...
说说函数节流和防抖？有什么区别？如何实现？
qq_45279574的博客
04-07 162
一、是什么 本质上是优化高频率执行代码的一种手段 如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能 为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用throttle（防抖）和debounce（节流）的方式来减少调用频率 定义 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时 一个经典的比喻: 想
vue中使用防抖和节流
01-24
vue项目中防抖和节流的指令 在mian.js中use就可以全局使用了
深入了解JavaScript 防抖和节流
10-16
主要介绍了JavaScript 防抖和节流,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
浅析JavaScript 函数防抖和节流
10-15
主要介绍了JavaScript 函数防抖和节流的相关资料，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
JS防抖和节流实例解析
10-16
主要介绍了JS防抖和节流实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue的click事件防抖和节流处理详解
10-16
今天小编就为大家分享一篇Vue的click事件防抖和节流处理详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JavaScript 防抖和节流遇见的奇怪问题及解决
01-21
场景 网络上已经存在了大量的有关 防抖 和 节流 的文章，为何吾辈还要再写一篇呢？事实上，防抖和节流，吾辈在使用中发现了一些奇怪的问题，并经过了数次的修改，这里主要分享一下吾辈遇到的问题以及是如何解决的。 为什么要用防抖和节流？ 因为某些函数触发/调用的频率过快，吾辈需要手动去限制其执行的频率。例如常见的监听滚动条的事件，如果没有防抖处理的话，并且，每次函数执行花费的时间超过了触发的间隔时间的话 – 页面就会卡顿。 演进 初始实现 我们先实现一个简单的去抖函数 function debounce(delay, action) { let tId return function(...a
前端性能优化--防抖节流
weixin_45221091的博客
04-21 132
防抖和节流 首先两者的区别 防抖：N秒内只触发一次，如果N秒内再次触发则重新计算时间； 节流：N秒内只触发一次，如果N秒内再次触发也不会执行； 防抖的实现 这里使用Vue自定义指令的形式实现，核心代码是事件绑定那段 /** * @description Vue自定义指令 * @param argment[0] {type: String} * @param argment[1] {type: Object} 在绑定组件中的各个生命周期中书写业务，这里使用inserted(){}
js 防抖、节流
onlyyoulxh的博客
06-01 188
防抖 在进行resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。 ...
前端性能优化(三)防抖和节流
weixin_45953482的博客
06-10 175
通过防抖和节流来防止js代码的高频率执行 函数防抖 原理：当持续触发一个事件时，在n秒内，事件没有再次触发，此时才会执行回调；如果n秒内，又触发了事件，就重新计时 当一直有人进电梯时（连续触发），电梯门不会关闭，在一定时间间隔内没有人进入（停止连续触发）才会关闭。 函数节流 原理：当频繁的触发一个事件，每隔一段时间， 只会执行一次事件。 如果在时间间隔内我们就触发事件,如果不在事件间隔内我们就触发事件区别：降低回调执行频率，节省计算资源。 防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行，节流是将
JavaScript-防抖和节流
接着奏乐接着舞的博客
06-24 918
本文介绍了防抖和节流的基本原理，实现方式，他是高阶函数的一个应用。
函数防抖和节流
程序媛的梦工厂
07-22 243
函数防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 function ajax(content) { console.log('ajax request ' + content) } function debounce(fun, delay) { return function (args) { let that = this ...
防抖和节流的概念及案例整理
weixin_45279175的博客
11-25 2077
防抖和节流的概念及案例整理前言一、概念1.防抖（debounce）的概念：2.节流（throttle）的概念：二、防抖和节流的不同三、防抖案例四、节流案例总结个人理解，欢迎指正。如有雷同，不胜荣幸。 前言 防抖和节流在JS中是一个非常重要的方法，这两个方法可以让浏览器的工作量大幅降低。 那么在正式整理之前呢，我们要搞清楚一个问题，那就是防抖（debounce）和节流（throttle）是什么，如何使用它们，它们之间又有什么区别？ 在前端开发中会遇到一些频繁的事件触发，比如： window 的 resize、
节流与防抖
菜菜的博客
08-09 2192
节流-throttle 节流的意思是，规定时间内，只触发一次。比如我们设定500ms，在这个时间内，无论点击按钮多少次，它都只会触发一次。具体场景可以是抢购时候，由于有无数人快速点击按钮，如果每次点击都发送请求，就会给服务器造成巨大的压力，但是我们进行节流后，就会大大减少请求的次数。 防抖-debounce 防抖的意思是，在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操...
浏览器解析URL过程、防抖、节流、回流、重绘解读
weixin_46184968的博客
05-19 1307
js引擎、浏览器解析URL、防抖、节流、回流、重绘
防抖节流 uniapp
09-13
防抖和节流是两种常用的前端性能优化方法。在uniapp中，可以通过以下方式实现防抖和节流： 1. 防抖：当事件触发后，延迟一段时间执行对应的函数，如果在延迟时间内再次触发了该事件，则重新计时。这样可以避免频繁...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值