防抖事件：

最新推荐文章于 2024-05-10 17:04:47 发布
最新推荐文章于 2024-05-10 17:04:47 发布
阅读量200 收藏
点赞数
分类专栏： 前端 js 文章标签： 1024程序员节 html css3 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jxl03280825/article/details/120943728
版权
前端 同时被 2 个专栏收录
7 篇文章 0 订阅
订阅专栏
js
4 篇文章 0 订阅
订阅专栏

原理：防抖的原理就是你不管点击触发多少次，我只会在时间触发n秒之后才执行一次

代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.boss{
				width: 200px;
				height: 200px;
				background: #00FFFF;
				margin: 200px auto;
				line-height: 200px;
				font-size: 30px;
				color: black;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="boss">1</div>
	</body>
	<script type="text/javascript">
		var boss = document.querySelector('.boss');
		var num = parseInt(boss.innerHTML);
		var bossTime = null;
		var bol = true;
		
		boss.onclick = function(){
			if(bol){
				bol = false;
				boxTime = setTimeout(function(){
				num++;
				boss.innerHTML = num;
				bol = true;
				clearTimeout
				},1000)				
			}
		}
	</script>
</html>

 

 效果：点击触发事件后，定时器在规定的一秒时间之后，数字由1变为2，在数字改变之前不管点击多少次，我只触发一次，只加1。

 

拥星辰与洛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
事件防抖
Jane_96的博客
06-28 427
事件防抖 问题引入 在输入框输入内容后间隔1000ms之后再请求callback 问题解决 直接绑定 下面这段代码，每次输入一个字母就会触发callback，显然性能是比较差的~从配图也能看出来，每次输入都会打印输入框的内容。 <!DOCTYPE html> <html> <head> <title>事件节流和事件防抖</ti...
微信小程序页面防抖事件
SunNang的博客
11-04 405
wxml <button type="primary" bindtap="Clik">点击</button> utils .js function debounce(fn, interval) { var timer; var gapTime = interval || 1000;//间隔时间，如果interval不传，则默认1000ms return function() { clearTimeout(timer); var context.
js防抖事件实践
zhangquanming123的博客
10-26 511
方法一、封装 vue 防抖节流函数——组件封装 防抖（debounce） 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 节流（throttle） 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。 就相当于，一个水龙头在滴水，可能一次性会滴很多滴，但是我们只希望它每隔 500ms 滴一滴水，保持这个频率。即我们希望函数在以一个可以接受的频率重复调用。 vue 封装utils.js 复制代码 const d
JS中的事件防抖
小七爱干饭的博客
01-03 956
提示：这里对文章进行总结：事件防抖的好处是，如果事件触发频率很高，可以避免每次都执行回调函数，从而减少不必要的操作。这在用户输入时比较有用，例如，当用户在输入框中输入文本时，可以使用事件防抖来减少对服务器的请求频率。
事件稀释：防抖与节流
花铛
12-06 169
事件稀释：有些事件在一段时间内会多次触发，事件稀释就是减少这些事件绑定的处理函数的执行频率，以减少频繁的事件处理对性能的损耗。事件稀释有两种方式：防抖和节流。可直接使用的第三方库有：underscore、lodash 等。例如：input 框的输入事件，不停地输入就会不停地执行绑定的事件处理函数。
Vue的click事件防抖和节流处理详解
10-16
- 函数防抖（debounce）：指的是当事件持续触发，防抖函数会等待一定的时间，在这段时间内如果事件再次被触发，则重新计时。只有当设定的时间结束后，函数才会执行一次。这种技术常用于提交数据、搜索框输入联想等...
解决Vue、小程序、uniapp多次触发事件多次发起请求，添加防抖功能：
not_balding的博客
05-09 2184
解决Vue、小程序、uniapp多次触发事件多次发起请求，添加防抖功能
Vue 中使用lodash对事件进行防抖和节流操作
10-15
防抖技术确保在事件触发后的特定时间内，如果再次发生相同的事件，只有最后一次事件会被处理。而节流技术则是在固定的时间间隔内，无论事件触发多少次，只保证至少执行一次。 在 Vue.js 中，我们可以利用lodash库来...
React组件来处理键盘事件 :key:
06-08
react-key-handler :key: React 组件来处理键盘事件（例如 keyup、keydown 和 keypress）。 Testimonials “很高兴看到 react-key-handler 是 SSR 安全的:thumbs_up:” [Veselin Todorov](https://github.com/vesln)...
通过实例学习React中事件节流防抖
10-16
在React开发中，高效地处理用户输入和页面交互是非常重要的，而事件节流（throttling）和防抖（debouncing）技术就是用来优化这种处理的关键策略。它们可以帮助我们在高频率的事件触发下，减少不必要的计算和DOM操作...
防抖和节流的概念及案例整理
weixin_45279175的博客
11-25 2320
防抖和节流的概念及案例整理前言一、概念1.防抖（debounce）的概念：2.节流（throttle）的概念：二、防抖和节流的不同三、防抖案例四、节流案例总结个人理解，欢迎指正。如有雷同，不胜荣幸。 前言 防抖和节流在JS中是一个非常重要的方法，这两个方法可以让浏览器的工作量大幅降低。 那么在正式整理之前呢，我们要搞清楚一个问题，那就是防抖（debounce）和节流（throttle）是什么，如何使用它们，它们之间又有什么区别？ 在前端开发中会遇到一些频繁的事件触发，比如： window 的 resize、
防抖、节流、深拷贝事件总线
weixin_56663198的博客
07-17 286
1 认识防抖和节流 2 underscore使用 3 防抖函数实现优化 4 节流函数实现优化 5 深拷贝函数的实现 6 事件总线工具实现
事件防抖，函数节流？如何实现防抖和节流？
weixin_40381947的博客
04-07 169
防抖和节流的概念其实最早并不是出现在软件工程中，防抖是出现在电子元件中，节流出现在流体流动中。◼而JavaScript是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。◼而对于某些频繁的事件处理会造成性能的损耗，我们就可以通过防抖和节流来限制事件频繁的发生；◼防抖和节流函数目前已经是前端实际开发中两个非常重要的函数，也是面试经常被问到的面试题防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内触发次数，两者都是为了减少触发频率，以便提高性能或者说避免资源浪费。
防抖（Debounce）
m0_63548381的博客
02-29 3315
防抖是一种前端常用的优化技术，用于防止连续多次触发事件。从而减少不必要的计算、网络请求或者页面渲染，提高性能。当一个事件被触发时，防抖函数并不会立即执行，而是会等待一段指定的时间。如果在这段时间内该事件再次被触发，则会取消之前设定的执行计划，并重新开始计时。这样，只有当事件停止触发并经过了预设的时间后，才会真正执行。通过防抖，可以避免在用户快速连续地进行操作时（例如连续快速点击按钮），服务器或浏览器因为接收到过多无意义的重复请求而造成的性能瓶颈，从而提高页面性能和用户体验。
javascript——事件防抖、节流处理
h_jQuery的博客
08-05 2007
防抖 在规定时间内，多次触发一个事件，事件内会执行一个函数。 应用场景：输入框内搜索，输入关键词就会触发搜索事件函数，一直输入一直触发。用防抖，防止连续发送请求，在规定的时间内（如2000ms内），只会触发一次搜索事件，以规定时间内的最后一次触发为准。 按钮多次点击提交，频繁触发提交事件。利用防抖，防止多次提交，在规定时间内，只处理最后一次的提交事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset
vue2/3 中的前端事件防抖和限流
最新发布
u012903034的博客
05-10 653
防抖（Debouncing）：在事件被触发后，等待一段时间后执行相应的操作。如果在等待时间内再次触发了相同的事件，则重新计时。适用于需要在事件停止触发一段时间后才执行操作的场景，如搜索框输入、滚动事件等。限流（Throttling）：控制事件触发的频率，确保在一定时间段内只触发一次事件。适用于需要限制事件触发频率的场景，如页面滚动、窗口大小调整等。防抖和限流是优化前端性能和提高用户体验的重要技术。通过合理应用防抖和限流，可以有效控制事件触发频率，避免不必要的资源浪费和性能下降。
防抖和节流
BrYangW的博客
03-14 463
是防止抖动，即在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
JS防抖
YuqiRealm.com
06-27 437
在前端开发的过程中，有时候我们需要对一些事件进行相应，但是，有时候，这些事件可能会十分频繁的触发。比如：1、window 的 resize、scroll 2、mousedown、mousemove 3、keyup、keydown为了解决这样的问题，一般会有两种方案来解决： 防抖和节流（debounce and throttle）本篇将讲述第一种方案：防抖防抖防抖的原理就是，触发事件的回调函数会在事
JavaScript 事件防抖
09-20
JavaScript 事件防抖是一种常见的事件处理技术，它可以帮助你减少事件响应频率。它的原理是在事件发生后，设置一个延迟执行的定时器，如果在延迟时间内再次触发事件，则重新计时。在延迟时间结束之前，如果没有再次...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值