JavaScript的防抖和节流案例

目录

防抖节流：

防抖：在一定的时间内只执行最后一次任务；

节流：一定的时间内只执行一次；

防抖

<button id=\"debounce\">点我防抖！</button>
 
$(\'#debounce\').on(\'click\', debounce());
 
function debounce() {
    let timer;
    // 闭包
    return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            // 需要防抖的操作...
            console.log(\"防抖成功！\");
        }, 500);
    }
}

节流：

<button id=\"throttle\">点我节流！</button>
 
$(\'#throttle\').on(\'click\', throttle());
 
function throttle(fn) {
    let flag = true;
    // 闭包
    return function () {
        if (!flag) {
            return;
        }
        flag = false;
        setTimeout(() => {
            console.log(\"节流成功！\");
            flag = true;
        }, 1000);
    };
}