手动实现一个节流throttle、防抖debounce

最新推荐文章于 2023-09-19 09:51:47 发布

WeidForest

最新推荐文章于 2023-09-19 09:51:47 发布

阅读量313

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/WadeForest/article/details/108239974

版权

手动实现一个节流、防抖

- - 节流throttle、防抖debounce区别

节流throttle、防抖debounce区别

首先了解一节流和防抖的区别，然后才好根据我们的需求，进行选择：
节流： 间隔时间之后才可以执行，中间无效。在时间段之内继续操作，停止时间段内的操作执行，过了时间段才可以继续操作。eg:射击游戏开枪的间隔，第一次是直接能开枪的，然后之后不管鼠标点击多少次，只有过了间隔时间才可以开枪，之间的都是无效操作。
防抖： 时间段内执行最后一次操作。在时间端内继续操作，会停止之前没执行完的操作，并执行最新操作。

可能用到的地方：
频繁触发的事件：文本框输入、window.resize窗口size改变、页面scroll滚动事件

下面先来实现一个节流：(变量控制)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<button>节流</button>
</body>
<script>
	// 控制频率
	var flg = true;
	// 是否是首次
	var nowDate = true; // ps:这个变量是自己搞得是否首次要直接执行，有更好的方法
	function throttle(callback,time ){
		// 如果flg为false说明函数再时间段范围之内，终止操作
		if( !flg ) {
			return;
		}
		flg = false;
		if(!nowDate){	// 如果不是第一次进入
			setTimeout(() => {
				callback();
				// flg 为 true 说明不在禁止执行的时间段内
				flg = true;
			}, time);
		}else {  // 如果是第一次进入
			callback();
			// 首次执行结束之后，设置变量为非首次
			nowDate=false;
			flg = true;
		}
	};
	// 需要节流的操作
	function fn(){
		console.log("节流");
	}

	document.querySelector('button').onclick = function(){
		console.log("=====鼠标点击======");
		throttle(fn,1000)
	}
</script>
</html>

下面先来实现一个防抖：（清除定时器）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<button>防抖</button>
	<input type="text">
</body>
<script>
// 防抖：清除定时器

var timer // 接收定时器ID 
function debounce(callback,time){
	clearTimeout(timer);
	timer = setTimeout(callback,time)
}

function fn(){
	console.log("防抖");
}

document.querySelector('button').onclick=function(){
		console.log("=====鼠标点击======");
		debounce(fn,1000)
	}
</script>
</html>

WeidForest

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
手动实现一个节流throttle、防抖debounce

手动实现一个节流、防抖节流throttle、防抖debounce区别节流throttle、防抖debounce区别首先了解一节流和防抖的区别，然后才好根据我们的需求，进行选择：节流：间隔时间之后才可以执行，中间无效。在时间段之内继续操作，停止时间段内的操作执行，过了时间段才可以继续操作。eg:射击游戏开枪的间隔，第一次是直接能开枪的，然后之后不管鼠标点击多少次，只有过了间隔时间才可以开枪，之间的都是无效操作。防抖：时间段内执行最后一次操作。在时间端内继续操作，会停止之前没执行完的操作，并执行最新
复制链接

扫一扫