防抖和节流

最新推荐文章于 2026-01-08 20:54:44 发布

原创最新推荐文章于 2026-01-08 20:54:44 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

防抖和节流

防抖

短时间内多次触发同一事件，只执行最后一次，或只执行最开始的一次。

示例
在这里插入图片描述

#content{
  		height:150px;
  		line-height:150px;
  		text-align:center; 
  		color: #fff;
  		background-color:#ccc;
  		font-size:80px;
  	}

<div id="content" ></div>

只执行最后一次

var content = document.getElementById("content");
var num = 1;
 content.onmousemove = function (){
		 	let obj = times;
		 	clearTimeout(times);
		 	times = setTimeout(()=>{
		 		times = null;
		 	},1000)
		 	if(!obj){
		 		console.log(typeof !obj);
		 		content.innerHTML = num++;
		 	}
		 };

只执行最开始的一次

var content = document.getElementById("content");
var num = 1;
let times;
content.onmousemove=function(){
	clearTimeout(times);
	let obj=times;
	time=setTimeout(()=>{
		time=null;
	},1000)
	if(!obj){
		content.innerHTML=num++;
	}
};

节流

如果持续触发同一事件，每隔一段时间只执行一次函数。

示例
在这里插入图片描述

#content{
  		height:150px;
  		line-height:150px;
  		text-align:center; 
  		color: #fff;
  		background-color:#ccc;
  		font-size:80px;
  	}

<div id="content" ></div>

延时器版

var content = document.getElementById("content");
		var num = 1;
		var time;
		content.onmousemove = function(){
			if(!time){
				time = setTimeout(()=>{
					time = null;
					content.innerHTML = num++;
				},1000)
			}
		}

时间戳版

var content = document.getElementById("content");
		var num = 1;
		var timeNew = 0;
		content.onmousemove = function(){
			var timeOld = Date.now();
			if(timeOld-timeNew>1000){
				timeNew = timeOld;
				content.innerHTML = num++;
			}
		}