js防抖与节流

最新推荐文章于 2023-05-10 22:01:31 发布

静尾

最新推荐文章于 2023-05-10 22:01:31 发布

阅读量212

点赞数

分类专栏：无所不能的JavaScript 前端性能优化方法文章标签： javascript

本文链接：https://blog.csdn.net/qq_41176306/article/details/113504182

版权

无所不能的JavaScript 同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

前端性能优化方法

1 篇文章 0 订阅

订阅专栏

js防抖与节流

文章目录

- js防抖与节流

防抖：

<!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>
	<input type="text" id="input">
	<div id="text"></div>

	<script>
		const text = document.querySelector('#text');
		const input = document.querySelector('#input');

		function debounce(fn, delay) {
			let timer = null;
			return () => {
				timer && clearTimeout(timer);
				timer = setTimeout(fn.bind(this, arguments), delay);
			}
		};

		function handleInput(arg) {
			text.innerText = input.value;
			console.log(arg);
		};

		input.addEventListener('input', debounce(handleInput.bind(this,'args'), 1000));
	</script>
</body>
</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>
	<input type="text" id="input">
	<div id="text"></div>

	<script>
		const text = document.querySelector('#text');
		const input = document.querySelector('#input');

		function throttle(fn, delay) {
			let timer = null;
			return () => {
				if(!timer) {
					timer = setTimeout(() => {
						fn.apply(this, arguments);
						timer = null;
					}, delay);
				}
			}
		};

		function handleInput(arg) {
			text.innerText = input.value;
			console.log(arg);
		};

		input.addEventListener('input', throttle(handleInput.bind(this,'args'), 1000));
	</script>
</body>
</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>
	<input type="text" id="input">
	<div id="text"></div>

	<script>
		const text = document.querySelector('#text');
		const input = document.querySelector('#input');

		function throttle(fn, delay) {
			let prev = Date.now(),
			    timer = null;
			return () => {
				let now = Date.now();
				if(now - prev > delay) {
					timer = setTimeout(() => {
						fn.apply(this, arguments);
						prev = Date.now();
					}, delay);
				}
			}
		};

		function handleInput(arg) {
			text.innerText = input.value;
			console.log(arg);
		};

		input.addEventListener('input', throttle(handleInput.bind(this,'args'), 1000));
	</script>
</body>
</html>