详解debounce防抖和throttle节流

最新推荐文章于 2024-06-23 09:24:07 发布

归小超

最新推荐文章于 2024-06-23 09:24:07 发布

阅读量1.6k

点赞数 1

分类专栏： javascript 前端知识文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42966484/article/details/111563282

版权

本文详细介绍了JavaScript中debounce防抖和throttle节流的概念及其应用场景。通过举例说明了两者的区别：debounce防抖确保在设定的时间间隔内只执行最后一次操作，而throttle节流则保证在设定时间内至少执行一次操作。文章还提供了具体的实现示例，帮助开发者更好地理解和运用这两种优化技术。

摘要由CSDN通过智能技术生成

首先我们先来看看如果一个事件持续频繁触发:

<style>
	#itemBox{
   
		background-color: lightgrey;width: 500px;height:300px;
		font-size:30px;text-align:center;line-height:300px;
	}
</style>
<body>
	<div id="itemBox"></div>
</body>
<script>
	var item = document.getElementById('itemBox');
	var num = 0;
	function numAdd(){
   
		num++;
		item.innerHTML = num;
	}
	item.onmousemove = numAdd;
</script>

在这里插入图片描述

顺便复习下：
onmousemove：鼠标移动
1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有），支持冒泡
2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有），不支持冒泡

因为鼠标每次移动都会触发onmousemove，所以导致页面的数字变化特别快，这个时候我们就要考虑利用debounce和throttle来节流
debounce防抖
一句话描述：A事件在X秒只触发一次，如果在X秒内又触发该事件，则触发后重置计时器，待X秒后发生该行为，并再次重置计时器，很好理解，防止手抖动持续触发
举个例子：作为班车的调度员，每5分钟发一班车，每次要到5分钟了，又有新乘客要来，然后又得重新等5分钟，等5分钟内没有新乘客，那就发车，否则一直等待不发车，以最后的乘客为标准
debounce具体实现：

var num = 0;
function debounce(func, delay){
   
	var timer;
	return function()

最低0.47元/天解锁文章

归小超

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
详解debounce防抖和throttle节流

首先我们先来看看如果一个事件持续频繁触发:<style> #itemBox{ background-color: lightgrey;width: 500px;height:300px; font-size:30px;text-align:center;line-height:300px; }</style><body> <div id="itemBox"></div></body><script>
复制链接

扫一扫

专栏目录