17、利用闭包封装（防抖与节流）

最新推荐文章于 2022-11-08 23:13:10 发布

jasmine_qiqi

最新推荐文章于 2022-11-08 23:13:10 发布

阅读量361

点赞数

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

本文链接：https://blog.csdn.net/weixin_45065754/article/details/124063007

版权

JS 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

本文介绍了前端开发中常见的两种优化技术——防抖(debounce)和节流(throttle)。防抖技术用于输入事件，确保在用户停止输入后只处理最后一次的数据，避免频繁触发。而节流技术则是在用户连续输入时，每隔固定时间获取一次数据，减少处理频率。通过示例代码展示了如何实现防抖和节流函数，并分别应用于输入框的实时搜索和滚动加载场景，有效提升了用户体验。

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

防抖与节流	区别
防抖	输入数据时只需要最后一次数据，不输入时停止
节流	在输入时每隔n秒获取数据，不输入就停止

<!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>Document</title>
</head>

<body>
	<!-- 1、防抖 -->
	<div class="case1">
		<h1>防抖</h1>
		<input type="text">
		<ul></ul>
	</div>

	<!-- 2、节流 -->
	<div class="case2">
		<h1>节流</h1>
		<input type="text">
		<ul></ul>
	</div>
	<script>

		// 1、防抖（输入数据时只需要最后一次数据，不输入时停止）
		var inp = document.querySelector('.case1 input');
		var ul = document.querySelector('.case1 ul');
		function debounce(fn, wait) {
			let timer = null;
			return function () {
				if (timer) { clearTimeout(timer); }
				timer = setTimeout(() => { fn(); }, wait)
			};
		}

		inp.oninput = debounce(function () {
			let li = document.createElement('li');
			let txt = document.createTextNode(inp.value);
			ul.appendChild(li);
			li.appendChild(txt);
		}, 2000)


		// 2、节流（在输入时每隔n秒获取数据，不输入就停止）
		var inp = document.querySelector('.case2 input');
		var ul = document.querySelector('.case2 ul');

		function throttle(fn, wait) {
			let mark = true;
			return function () {
				if (mark) { setTimeout(() => { fn(); mark = true; }, 500) }
				mark = false;
			};
		};

		inp.oninput = throttle(function () {
			let li = document.createElement('li');
			let txt = document.createTextNode(inp.value);
			ul.appendChild(li);
			li.appendChild(txt);
		}, 2000)
	</script>
</body>

</html>