JavaScript的防抖与节流 javascript

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的防抖与节流】

文章图片

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