最简单的防抖和节流

最新推荐文章于 2022-10-04 08:45:00 发布
最新推荐文章于 2022-10-04 08:45:00 发布
阅读量690 收藏
点赞数 1
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51012534/article/details/124145863
版权
本文介绍了JavaScript中防抖和节流的概念及其应用场景。防抖技术用于优化输入框输入事件，避免频繁触发导致的性能问题，而节流则常用于模拟WebSocket，定时获取后台数据。文章通过分析防抖的实现逻辑，包括setTimeout和变量管理，展示了防抖函数的代码实现。同时，对比了节流与防抖的相似之处，强调了节流在单位时间内仅执行一次的特点。
摘要由CSDN通过智能技术生成

最简单的防抖和节流

防抖

为什么需要防抖 环境

1、在开发过程里面 有没有遇到过 输入框的输入时间 “input” 每次输入都会触发一次对应的事件，这样不仅浪费性能，个人感觉体验还不是特别好 没输入一次就出发一次，这样的情况，如果涉及大量数据的匹配筛查，是不是就会特别的难受，我都还没有指明我要筛选哪些数据，就开始筛选，不够精确，增加了界面渲染和后端服务器的压力

2、那有没有呀可以等我输入完了再做判断筛选 或者我不输入了再进行筛选的操作 ？？？还真的有：那就是 防抖

3、防抖简单讲就是在事件被触发后n秒后再执行，并且如果一直操作只有最后一次生效

那我们要怎么做

分析一下：

1.n秒后执行 是不是应该有一个延迟执行函数，想到了吗？对就是 setTimeout,
2.要保证每一次的执行都要判断是不是在n秒内 是不是应该有一个变量来管理 timer
3.那按什么来判断是否满足执行条件，都说了是n秒 那么就用自定义的aweit
原理逻辑都有了 那么我们来看看代码

function fd(fn,aweit
最低0.47元/天 解锁文章
前端大傻
关注
专栏目录
简单入门到彻底搞懂防抖和节流
robinhunan的博客
05-19 1610
防抖和节流是怎么回事？如何搞懂防抖和节流？如何防抖节流？防抖和节流应用场景是什么样的，防抖和节流应用在什么地方？防抖和节流有什么用途呢？
简单版的防抖和节流
weixin_49343253的博客
06-30 320
防抖和节流都是为了解决响应速度更不上触发频率，而出现的卡死，不流畅问题。 防抖：事件在触发n秒后会执行，如果n秒内事件再次被触发则重新计时 //fn要进行防抖的函数 function debounce(fn,delay){ let timeout = null, //设置定时器标识存放定时器 return function(){ //闭包保存定时器 clearTimeout(time...
最简单的防抖和节流；这都不会?
weixin_50307964的博客
10-18 313
**防抖:** 在一定时间内执行最后一次操作; **节流:** 在一定时间内执行一次操作;
一个简单的防抖
weixin_44900249的博客
11-12 307
let timeout = -1 //写在外边 support(e) { this.sup = !this.sup clearTimeout(timeout) timeout = setTimeout(() => { console.log(this.sup) //这里边写需要防抖的内容 clearTimeout(timeout) }, 900) },
浅析JavaScript 函数防抖和节流
10-15
在实现节流和防抖时，主要的注意点是如何处理函数中this的指向和函数参数。由于JavaScript的setTimeout()会将函数中的this指向window，而我们需要的this并不一定是window，所以通过apply()方法来指定函数执行时的上...
防抖和节流的实现
FangFang's Blog
06-14 1586
防抖：则是对连续触发的事件，只会执行一次，不管事件触发多少次，都只执行一次。（在防抖里设置的时间可以说是对连续触发时间的定义，在设置时间内运行的事件就被称为连续触发的事件） 节流：是指对于连续触发的事件，每隔一段固定时间执行一次，只要事件持续出发就可以执行很多次。（在节流里涉及的时间主要是指事件执行的间隔时间） 总结：函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。...
面试题 防抖和节流
xihuanLilia的博客
03-09 2310
防抖和节流前言😺防抖🐱 前言😺 防抖和节流是一个常问的面试题 我也不指名道姓了，不同于某些jsonp 防抖和节流在实际开发者对性能的优化和对用户体验的升级都有作用 所以我们很有必要掌握 话不多说 开始正文😾 防抖🐱 函数防抖，就是指触发事件后，函数在 n 秒后只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数的执行时间。 简单的说 就是一段时间只执行一次 这样就能够保证用户在频繁触发某些事件的时候，不会频繁的执行回调，只会被执行一次 举个例子🌰 你打游戏 按b回城需要十秒钟 🐱 等你回了城出来 再
防抖 最简单防抖
mengfanyue123的博客
11-01 202
在input框输入的时候，当我们监听input事件的时候，由于input事件是一旦输入框内容发生改变就触发我们绑定的回调函数，在实际当中我们往往会根据输入框内容去发送一些请求，这样一旦改变就触发无疑是耗时的，而且影响性能,这个时候，我们就可以使用防抖动。实现的大概思路就是我们可以自定义隔多长时间来触发我们的处理操作(例如ajax请求数据等) 方案一 var timer = null element.input = function () { clearTimeout(timer) // 每次进来的时
JS简单实现防抖和节流
weixin_34283445的博客
07-30 918
一、什么是防抖和节流 Ps: 比如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，那得消耗多大的服务器资源，即使你的服务器资源很强大，也不带这么玩的。 1. 防抖 - debounce 其中一种解决方案就是每次用户停止输入后，延迟超过500ms时，才去搜索此时的String，这就是防抖。 原理：将若干个函数调用合成为一次，并在给定时间过去之后仅被调用一次。...
简单的防抖节流操作
阳阳的博客
04-27 352
目录 防抖 为什么需要防抖 环境 节流 环境 防抖 为什么需要防抖 环境 1、在开发过程里面 有没有遇到过 输入框的输入时间 “input” 每次输入都会触发一次对应的事件，这样不仅浪费性能，个人感觉体验还不是特别好 没输入一次就出发一次，这样的情况，如果涉及大量数据的匹配筛查，是不是就会特别的难受，我都还没有指明我要筛选哪些数据，就开始筛选，不够精确，增加了界面渲染和后端服务器的压力 2、那有没有呀可以等我输入完了再做判断筛选 或者我不输入了再进行筛选的操作 ？？？还真的有：那
简单 防抖 节流
qq_45219069的博客
09-10 124
<div class="move-box">宽100高100</div> <input type="text" class="input"> <script> let timer = null let dTimer = null let click = function(){ throttle(()=>{ console.log
防抖，节流
cmy741741的博客
11-15 496
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>防抖</ti.
通俗易懂的防抖和节流
weixin_46468143的博客
02-09 2162
当我们为了避免频繁的触发回调导致大量的计算或请求等问题，我们需要用一些方法来处理，这个时候 防抖和节流就出现了 这两个东都与 闭包的形式出现 防抖 什么是防抖？ 防抖：事件被触发n秒之后再执行函数，如果在n秒内再次触发就重新计时 比如：点击一个按钮输出1 当没有做防抖的时候一直点就一直触发 如果做了防抖 点击之后两秒触发 2秒内再次点击就重新计时 当停下来两秒之后会触发 防抖函数 <button>防抖</butto> <script> let btn = docume
简单版-手写防抖(debounce)和节流(throttle)
最新发布
无理. 的博客
10-04 1282
在前端需求开发中，经常需要绑定一些持续触发的事件，例如 scroll事件、onmouseover事件等等，但实际项目中我们并不希望这么频繁的去执行，因为会极大地浪费资源，降低应用性能。防抖和节流可以减少调用频率，目前是解决上边这个问题比较好的方案。防抖就是指触发事件后在 n 秒后函数只能执行一次，如果在 n 秒内又触发了该事件，则会重新计算函数的执行时间。比如 n=10，如果在第8秒又触发了，则又会从0秒开始计算。
简单的防抖
qq_60163657的博客
10-06 115
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <titl...
最简单的 节流防抖_debounce_throttle js
yuan_618859的博客
07-09 283
最简单的 节流防抖_debounce_throttle 特别鸣谢：https://segmentfault.com/a/1190000018428170 debounce_throttle_防抖_节流 1.防抖 > 1.停，才执行 > 2.（优点：能保证最后一次被调用，但只执行一次） <div style="margin-top: 30px;"> <h2>2.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值