函数防抖debounce
函数节流throttle
函数防抖:将几次操作合并为一此操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发
函数节流:使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数
区别
var timeout = null
function debounce(fn, wait){
return function(){
if( timeout !== null ) clearInterval(timeout)
timeout = setTimeout(fn, wait)
}
}
function throttle(func, delay){
let prev = Date.now()
return function(){
let context = this
let args = arguments
let now = Date.now()
if( now - prev >= delay ){
func.apply(context, args)
prev = Date.now()
}
}
}
function handle(){
console.log(1)
}
window.addEventListener('scroll', debounce(() => console.log('debounce'), 1000));
window.addEventListener('scroll', throttle(() => console.log('throttle'), 1000));