JavaScript 的防抖函数
函数的执行是十分快的,在上一个函数还没有在定时器中被执行完前,下一个函数就曾经开始了执行,就导致了上一个定时器工作被革除了。
// 防抖(debounce)在肯定工夫内只能执行最初一次函数调用
function debounce(fn, delay) {
let timeout = null // 初始化一个定时器
return function(...args) {
// 当曾经存在一个定时器的时候,就勾销掉,就相似于勾销了上一次的 setTimeout 函数
if(timeout) clearTimeout(timeout)
// 当没有定时器或者上一个定时器曾经被勾销后,就开始新的定时器
timeout = setTimeout(() => {fn(...args)
}, delay)
}
}
const debounceFn = debounce((a,b)=>console.log(a+b), 2000)
debounceFn(1,2) //canceled
debounceFn(2,3) //canceled
debounceFn(3,4) //canceled
debounceFn(4,5) //canceled
debounceFn(5,6) // 11
JavaScript 的节流函数
// 节流函数(throttle)在 delay 工夫内只会执行一次传入的函数
function throttle(fn, delay) {
let status = true // 定义一个状态值,初始化为 true
return function(...args) {if(!status) return // 当初始化值为 true 时,阐明有函数在被执行中
status = false // 状态值设为 false,避免其余函数进行执行
setTimeout(() => {fn(...args)
status = true // 函数执行完之后,状态值从新设置为 true,这个时候下一个函数能够进行执行操作
}, delay)
}
}
const throttleFn = throttle((a,b)=>console.log(a+b), 2000)
throttleFn(1,2) // 3
throttleFn(1,2) // canceled
throttleFn(1,2) // canceled
throttleFn(1,2) // canceled
throttleFn(1,2) // canceled