函数防抖debounce/函数节流throttle

函数防抖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));