前端常用方法——函数防抖节流(立即执行,非立即执行,时间节流,setTimeout节流 )
场景
函数防抖分为立即执行和非立即执行,立即执行是指开始立即执行一次,之后在指定时间后再执行才可以执行;非立即执行是指 执行过程中不执行,执行后过一段时间再执行
函数节流是指根据间隔时间执行
下面是其简易实现
防抖
// 非立即执行版
function debounce(fn,time) {
let timer = null
return function() {
clearTimeout(timer)
timer = null
timer = setTimeout(() => {
fn.apply(null)
},time)
}
}
// 立即执行版
function debounce2(fn,time) {
let timer = null
return function() {
if(timer) {
clearTimeout(timer)
}
if(!timer) {
fn.apply(null)
}
timer = setTimeout(() => {
timer = null
},time)
}
}
// 利用setTimeout的特性+闭包来实现
// 调用
window.addEventListener('scroll',debounce(function() {
console.log(1)
},50))
window.addEventListener('scroll',debounce2(function() {
console.log(2)
},1000))
节流
// 利用setTimeout 方法
function throttle(fn,time) {
let timer = null
return function() {
if(!timer) {
timer = setTimeout(() => {
fn.apply(null)
timer = null
},time)
}
}
}
// 利用Date.now() 方法
function throttle2(fn,time) {
let preTime = 0
return function() {
// 不加入该判断会立即执行一次
if(!preTime) {
preTime = Date.now()
return
}
if(Date.now() - preTime > 1000) {
fn.apply(null)
preTime = Date.now()
}
}
}
小结
重新看了下这些方法,逻辑比之前理解的块,多看多记有很大帮助~