防抖和节流
防抖
- 短时间内
多次触发同一事件
,只执行最后一次
,或只执行最开始的一次
。
示例
#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++;
}
}