js-防抖节流

简介

1.防抖

操作停止后间隔一定时间执行

function debounce(method,delay) {
    let timer = null
    return function () {
      	// 事件默认参数可通过arguments使用
      	console.error(arguments)
        if(timer) {
            clearTimeout(timer)
            timer = null
        }
        timer = setTimeout(() => {
            method.call(this, arguments)
        }, delay);
    }
}

// 带immediate的，immediate为true相当于封装了一个隐藏的loading
function d(fn, wait, immediate) {
    let timer = null
    return function () {
        if(timer) clearTimeout(timer)
        if(immediate) {
            let callNow = !timer
            timer = setTimeout(() => {
                timer = null
            }, wait)
            if(callNow) fn.call(this, arguments)
        }else {
            timer = setTimeout(() => {
                fn.call(this, arguments)
            }, wait)
        }
    }
}
function fn(v) {
    console.log(v);
}
window.onscroll = d(fn, 2000, true)

2.节流

持续触发但不会执行和触发次数一样的次数，每间隔一定时间执行一次，减少了执行的频率

function throttle(method,delay){
    let timer = null
    return function () {
        if(!timer) {
            timer = setTimeout(() => {
                method()
                clearTimeout(timer)
                timer = null
            }, delay);
        }
    }
}

function t(fn, wait) {
    let time = new Date().getTime()
    return function () {
        let now = new Date().getTime()
        if(now - time >= wait) {
            fn.call(this, arguments)
            time = now
        }
    }
}
function fn(v) {
    console.log(v) // 能取到事件及参数
}
window.onscroll = t(fn, 1000)