防抖
function debounce(fn, time, istrue) {
let timer = null;
return function () {
if (istrue) {
istrue = !istrue
fn.apply(this, arguments)
}
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments)
}, time);
}
}
节流
function throttle(fun, time) {
let timer = null;
return function () {
if (!timer) {
fun.apply(this, arguments)
timer = setTimeout(() => {
timer = null
}, time)
}
}
}
函数防抖像是游戏中的法师释放技能,释放条没结束,再次按键则会重新释放。
函数节流像是FPS游戏中的射速,就算鼠标一直按,但射速也不变。
应用场景:
debounce:
search搜素框中,用户不断输入值时,用防抖来节约请求资源。(如百度搜索框输入关键词,下拉框提示)
不断调整浏览器窗口的大小触发window.resize事件,用防抖来让他只触发一次。
throttle:
鼠标不断点击触发,单位时间内只触发一次。(如FPS游戏中枪的射速)
监听浏览器滚动事件。