防抖(debounce)
指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
应用:实时搜索
function debounce(handler, delay) {
var timer = null
return function () {
var _self = this,
_arg = arguments;
clearTimeout(timer)
timer = setTimeout(function () {
handler.apply(_self, _arg)
}, delay)
}
}
function ajax(e) {
console.log(e)
}
oInp.onclick = debounce(ajax, 2000)
节流(throttle)
指连续触发事件但是在 n 秒中只执行一次函数。
应用:窗口调整(resize),页面滚动(scroll),抢购疯狂点击。
function throttle(handler, wait) {
var lastTime = 0
return function () {
var nowTime = new Date().getTime()
if (nowTime - lastTime > wait) {
handler.apply(this, argumrnts)
lastTime = nowTime
}
}
}
function ajax(e) {
console.log(e)
}
oBtn.oncilck = throttle(ajax, 1000)