js 防抖函数节流函数

news2024/9/22 17:17:10

某些事件中(如 onresize onscroll onkeydown onkeyup onmousemove …)，会连续触发函数的执行，如果函数执行一些耗时的操作(如请求数据…)，会影响性能，也有可能造成服务器压力。这时可以用防抖函数或节流函数解决这种问题。

防抖函数:

不管事件怎么连接触发函数的执行，我只在事件结束后的N毫秒执行一次函数；如果事件还在连接触发，就不执行函数。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8" />
	<style type="text/css">
		#box{width:200px;height:200px;border: 1px solid red;}
	</style>
</head>
<body>

<div id="box"></div>

</body>
<script>
function debounce(fn,wait){
  let timeoutId = null;
  return function(){
  	let args = arguments;
    timeoutId && clearTimeout(timeoutId);
    timeoutId = setTimeout(function(){
      fn(args);
    },wait)
  }
}
function doing(arg){
	console.log(arg);
}
let fn = debounce(doing,1000);
box = document.getElementById("box");
box.onmousemove = function(){
	fn(1,2,3);
}
</script>
</html>

效果图：

请添加图片描述

节流函数:

事件在连接触发的过程中，我会隔N毫秒执行一次函数；如果N毫秒内多次触发事件，则只会执行一次函数。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8" />
	<style type="text/css">
		#box{width:200px;height:200px;border: 1px solid red;}
	</style>
</head>
<body>

<div id="box"></div>

</body>
<script>
function throttle(fn,wait){
	let timeoutId = null;
	return function(){
		let args = arguments;
		let now = Date.now();
		if(!timeoutId){
			timeoutId = setTimeout(function(){
				timeoutId = null;
				fn(args);
			},wait)
		}
	}
}

function doing(arg){
	console.log(arg);
}
let fn = throttle(doing,1000);
box = document.getElementById("box");
box.onmousemove=function(){
	fn(1,2,3);
}
</script>
</html>