防抖和节流

koguo

已于 2023-12-27 12:18:02 修改

阅读量242

点赞数 4

分类专栏：前端印象文章标签：前端 javascript 开发语言

于 2023-12-26 11:23:18 首次发布

本文链接：https://blog.csdn.net/qq_42858057/article/details/135214080

版权

前端印象专栏收录该内容

17 篇文章 3 订阅

订阅专栏

简单概述：
数秒之后方可发送（防抖）；
数秒之内只发送一次（节流）。

细节描述：
点击之后，等待指定时间后，并且没有再次点击，方可发送请求（防抖）。
点击之后立即发送请求，等待指定时间后，再次点击，方可再次发送请求（防抖）。

以一个点击事件和发送请求来举例：

<! DOCTYPE html>
<html lang="en">
	<head>
		<title></title>
	</head>
	<body>
		<button onclick="clickSendRequest()">点击发送请求</button>
	</body>
	<script>
		/**
		*	@description 点击发送请求
		*/
		function clickSendRequest(){
			//防抖
			debounce(function(){
				console.log("已发送请求（防抖）")
			}, 1000)()
			//节流
			throttle(function(){
				console.log("已发送请求（节流）")
			}, 1000)()
		}
		
		/**
		*	@description 防抖函数（等待wait时间过后，执行fn回调函数）
		*	@param {function} fn 回调函数
		*	@param {Number} wait 等待时间（等待wait秒后执行）
		*/
		function debounce(fn,wait){
			let timeout;
			return function(){
				clearTimeout(timeout);
				timeout = setTimeout(fn,wait);
			}
		}	
		
		/**
		* @description 节流函数（限制limit秒内执行一次fn回调函数）
		* @param {function} fn 回调函数
		* @param {Number} limit 限制时间（限制limit秒内执行一次）
		*/
		function throttle(fn, limit){
			let inTrottle;
			return function (){
				if(!inTrottle){
					fn();
					inTrottle = true;
					setTimeout(() => {
						inTrottle = false;
					}, limit)
				}
			}
		}
	</script>
</html>