非立即执行:时间触发后,n秒后执行n秒内多次触发事件重新开始计算函数执行时间,时间重置
<div id="content" </div>
<script>
let num = 1;
let content = document.getElementById('content');
function count() {
content.innerHTML = num++;
};
function debounce(){
let timer
let content = this
let args =arguments
return function(){
if(timer){
clearInterval(timer)
}
//点击后0.5秒执行
timer = setTimeout(function(){
count.apply(content,args)
},500)
}
}
立即执行:事件触发函数立即执行,n秒内不继续触发才能继续执行函数效果,表现形式为移动触发,n秒内不移动后,再次触发,函数在执行
<div id="content"</div>
<script>
let num = 1;
let content = document.getElementById('content');
function count() {
content.innerHTML = num++;
};
function debounce(){
var timer
return function(){
if(timer){
clearTimeout(timer)
}
if(!timer){
count()
}
timer = setTimeout(function(){
timer = undefined
},500)
}
}
content.onmousemove =debounce();