节流和防抖
作用:均是为节约计算机资源而生,也就是归属于优化方面
原理:均使用setTimeout
来存放待执行的函数,很方便的利用它的延时机制来确定合适的函数触发时机。
节流
定义:指定时间间隔内只能执行一次任务
场景:懒加载图片加载的时候,scroll滚动条的判断时机
实现:
function throttle(fn, interval) {
let canRun = true;
return function () {
if (!canRun) return;
canRun = false
setTimeout(() => {
fn.apply(this, arguments)
canRun = true
}, interval)
}
}
防抖
定义:任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行,它的计时有一个更新
场景:用户名输入时的判断
实现:
function debounce(fn, interval) {
let timeout = null;
return function () {
clearTimeout(timeout)//清除前一次触发的时间
timeout = setTimeout(() => {
fn.apply(this, arguments)
}, interval)
}
}
结束!