防抖节流

防抖

function debounce(fn, duration = 500) {//自定义防抖函数,默认0.5秒内没有再次触发该函数时执行
    let timer
    return function (...args) {
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            typeof fn === 'function' && fn.apply(this, args)
        }, duration)
    }
}

const input = document.getElementById('input')
input.addEventListener('input', debounce(event => {
    console.log(event.target.value)
}));

节流

function throttle(fn, duration = 1000) { //自定义节流函数，1秒内只触发一次
    let time = 0
    return function (...args) {
        if (new Date() - time > duration) {
            typeof fn === 'function' && fn.apply(this, args)
            time = new Date()
        }
    }
}

const btn = document.getElementById('btn')
btn.addEventListener('click', throttle(event => {
    console.log(event.target.innerText)
}));