防抖节流的实现

最新推荐文章于 2022-09-06 14:00:42 发布

csyz12138

最新推荐文章于 2022-09-06 14:00:42 发布

阅读量172

点赞数 1

分类专栏： js 文章标签：防抖节流

本文链接：https://blog.csdn.net/qq_41494464/article/details/99999371

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

函数防抖（debounce）

什么是防抖
在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。
应用场景
（1）用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；
（2）window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；
实现

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>节流防抖</title>
	<style type="text/css">
		.box{
			width: 800px;
			height: 1000px;
			border: 1px solid #ccc;
		}
	</style>
</head>

<body>
	<div class="box">
		<input id="input" name="text" type="text" placeholder="输入文本">
		<p id="p"></p>
	</div>
</body>
<script type="text/javascript">
	function debounce (fn,delay){				// 防抖
		let timer = null;
		return function(...arg){
			clearTimeout(timer)
			timer = setTimeout(fn, delay, ...arg)
		}
	}
	window.onload = function(){
		let inp = document.getElementById('input')
		let p = document.getElementById('p')
		inp.addEventListener('input', debounce((e) => {
			p.innerHTML = '防抖查询:' + e.target.value
		},500), false)
	}
</script>
</html>

函数节流（throttle）

什么是节流
规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
应用场景
（1）鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
（2）在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；
（3）监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；
实现

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>节流防抖</title>
	<style type="text/css">
		.box{
			width: 800px;
			height: 1000px;
			border: 1px solid #ccc;
		}
	</style>
</head>

<body>
	<div class="box">
		<input id="input" name="text" type="text" placeholder="输入文本">
		<p id="p"></p>
	</div>
</body>
<script type="text/javascript">
	function throttle (fn,delay){						// 节流
		let access = true
		return function(...arg){
			if(access){
				access = false
				setTimeout(() =>{access = true}, delay)
				fn(...arg)
			}else return null
		}
	}

	window.onload = function(){
		let inp = document.getElementById('input')
		let p = document.getElementById('p')
		inp.addEventListener('input', throttle((e) => {
			p.innerHTML = '节流查询:' + e.target.value
		},500), false)
	}
</script>
</html>

csyz12138

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖节流的实现

函数防抖（debounce）什么是防抖在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。应用场景（1）用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；（2）window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；实现<...
复制链接

扫一扫

专栏目录