纯手写js防抖代码，及原理讲解，js防抖看这一篇就够了

最新推荐文章于 2024-06-14 14:14:14 发布

清风问水

最新推荐文章于 2024-06-14 14:14:14 发布

阅读量2.7k

点赞数 2

分类专栏： js基本能力文章标签： js防抖原理防抖防抖demo 什么是防抖

本文链接：https://blog.csdn.net/u012411231/article/details/106926053

版权

js基本能力专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、什么是js防抖？

当持续触发事件的过程中，当过了一定时间段（timer）没有再触发事件时，事件处理函数会执行最后一次的事件操作。

2、口述举例

最简单举例，你滚动你的滚动条的事后，如果绑定了滚动事件，那将在没滚动及其细微的改变就会触发这个事件，没滚动一下可能触发了非常多的次数事件，如果事件中含有请求，那将非常浪费资源，使用防抖之后，每次最后停留的时候，才执行最后一次事件，极大的减轻系统压力。

3、设计思路

先设置一个计时器变量，用闭包保存，保证不会被内存释放，在事件触发的时候，也就是只要事件触发，先清除这个计时器，然后再设置一个，那么只要事件持续触发，刚刚建立的定时器就会被销毁，直到最后我们不在触发事件，就执行最后一次设置的定时器

4、直接捞干的，上货

可以用下面我写的代码，手动测一下，在滚动结束之后内容区会打印出文字，或者打开控制台去查看

<!DOCTYPE>
<html>
<head>
</head>
<body>
<div id="content" style="height: 500px; width: 300px; border: 1px dashed black; overflow-x: hidden; overflow-y:scroll">
	<div id="textContent" style="height: 800px; width: 200px; color: red; letter-spacing: 1px;margin-left: 50px"></div>
</div>
<script>
	let info = ''
	var request = function () {
		info +=     '<p>防抖原理：<p style="color: #4E99E4; text-indent: 2em">当持续触发事件的过程中，当过了一定时间段（timer）没有再触发事件时，事件处理函数会执行最后一次的事件操作</p>实现的思路就是：<p style="color: #4E99E4; text-indent: 2em">先设置一个计时器变量，用闭包保存，保证不会被内存释放，在事件触发的时候，也就是只要事件触发，先清除这个计时器，然后再设置一个，那么只要事件持续触发，刚刚建立的定时器就会被销毁，直到最后我们不在触发事件，就执行最后一次设置的定时器。</p></p>'
		document.getElementById('textContent').innerHTML = info
		console.log(
		  '防抖原理：当持续触发事件的过程中，当过了一定时间段（timer）没有再触发事件时，事件处理函数会执行最后一次的事件操作',	'实现的思路就是：先设置一个计时器变量，用闭包保存，保证不会被内存释放，在事件触发的时候，也就是只要事件触发，先清除这个计时器，然后再设置一个，那么只要事件持续触发，刚刚建立的定时器就会被销毁，直到最后我们不在触发事件，就执行最后一次设置的定时器。'
		)
	}
	var debounce = function (fn, delayTime) {
		let timer
		return function () {
			clearTimeout(timer)
			timer = setTimeout(() => {
				fn.call(this)
			}, delayTime)
			
		}
	}
	window.onload = function () {
		document.getElementById('content').addEventListener('scroll', debounce(request, 1000))
	}
	
</script>
</body>
</html>

效果如图在这里插入图片描述

原创声明：欢迎转载，希望标明原创链接

清风问水

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
纯手写js防抖代码，及原理讲解，js防抖看这一篇就够了

纯手写js防抖代码，及原理讲解，js防抖看这一篇就够了1、什么是js防抖？当持续触发事件的过程中，当过了一定时间段（timer）没有再触发事件时，事件处理函数会执行最后一次的事件操作。2、口述举例最简单举例，你滚动你的滚动条的事后，如果绑定了滚动事件，那将在没滚动及其细微的改变就会触发这个事件，没滚动一下可能触发了非常多的次数事件，如果事件中含有请求，那将非常浪费资源，使用防抖之后，每次最后停留的时候，才执行最后一次事件，极大的减轻系统压力。3、设计思路先设置一个计时器变量，用闭包保存，保证不会
复制链接

扫一扫

专栏目录