js 防抖节流练习

• 防抖

const input1 = document.getElementById('input1')

let timer = null;
input1.addEventListener('keyup', function () {
    if (timer) {
        clearTimeout(timer)
    }
    timer = setTimeout(() => {
        console.log(input1.value);
    }, 500);
})

// 防抖
function debounce(fn, delay = 500) {
    // timer 是闭包中
    let timer = null;
    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments); // fn() 也可以
            timer = null;
        }, delay);
    }
}
input1.addEventListener('keyup', function () {
    console.log(input1.value);
}, 700)

• 节流

const div1 = document.getElementById('div1');

let timer = null;
div1.addEventListener('drag', function(e) {
    if(timer) {
        return
    }
    timer = setTimeout(() => {
        console.log(e.offsetX, e.offsetY);
        timer = null;
    }, 200);
})

// 节流
function throttle(fn, delay= 100){
    let timer = null; 
    return function() {
        if(timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    }
}

div1.addEventListener('drag', throttle(function(e){
    console.log(e.offsetX, e.offsetY);
}), 200)