防抖：在一定的時間內只執行最後一次任務；

節流：一定的時間內只執行一次；

防抖

<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',http://www.cppcns.com throttle());
 
function throttle(fn) {
    let flag = true;
    // 閉包
    return function () {
    程式設計客棧    if (!flag) {
            return;程式設計客棧
        }
        flag = false;
www.cppcns.com        setTimeout(() => {
            console.log("節流成功！");
            flag = true;
        },1000);
    };
}

到此這篇關於javascript的防抖和節流案例的文章就介紹到這了,更多相關javaScript防抖和節流內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！