节流和防抖
节流
节流就是每隔一段时间就执行一次函数,方法是设置一个定时器,n秒后执行事件并重置定时器。
点击一个div,会产生一个随机数(工作中一般是请求接口或者跳转页面)
let box = document.querySelect('#box'), t = null, time = 1000
box.onclick = function(){
if(!t){
t = setTimeout(() => {
box.innerHTML = (Math.random()*100).toFixed(0)
clearTimeout(t)
},time)
}
}
防抖
执行完动作后启动定时器,n秒后执行函数,如果函数还未执行又重新执行动作,则计时器重置。
输入框搜索
let t = null,time = 1000
input.onkeyup = function(){
if(t) clearTimeout(t)
t = setTimeout(() => {
queryInputDate()
},time)
}