JavaScript的防抖和節流案例

目錄

防抖：在一定的時(shí)間內只執行最后一次任務(wù)；

節流：一定的時(shí)間內只執行一次；

防抖

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

節流：

<button id="throttle">點(diǎn)我節流！</button>
 
$('#throttle').on('click', throttle());
 
function throttle(fn) {
    let flag = true;
    // 閉包
    return function () {
        if (!flag) {
            return;
        }
        flag = false;
        setTimeout(() => {
            console.log("節流成功！");
            flag = true;
        }, 1000);
    };
}

到此這篇關(guān)于JavaScript的防抖和節流案例的文章就介紹到這了,更多相關(guān)JavaScript防抖和節流內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！