函數(shù)節(jié)流與函數(shù)防抖

我們在一個項目中按鈕連續(xù)多次點擊栋豫，會造成一些問題挤安，比如連點按鈕會造成多次push頁面，或者造成多次網(wǎng)絡(luò)請求丧鸯。那么就需要寫一個防連點來解決這個問題蛤铜。

小程序button組件有一個disabled屬性，設(shè)置按鈕是否禁用的屬性骡送。
起初我想用這一屬性來解決按鈕連點的問題昂羡，但是事實證明真機上并木有什么卵用，還是會有連點的問題發(fā)生摔踱。。后來發(fā)現(xiàn)了函數(shù)節(jié)流和函數(shù)防抖怨愤，到此解決按鈕連點問題派敷。

什么是函數(shù)節(jié)流與函數(shù)防抖

函數(shù)節(jié)流（throttle）: 指定時間間隔內(nèi)只會執(zhí)行一次任務(wù)。
函數(shù)防抖（debounce）: 任務(wù)頻繁觸發(fā)的情況下撰洗，只有任務(wù)觸發(fā)的間隔超過指定間隔的時候篮愉，任務(wù)才會執(zhí)行。

函數(shù)節(jié)流例子：
以判斷頁面是否滾動到底部為例差导，一般就是監(jiān)聽 window 對象的 scroll 事件试躏，然后函數(shù)體中寫判斷是否滾動到底部的邏輯：

$(window).scroll(function() {
    // 判斷是否滾動到底部的邏輯
    const pageHeight = $('body').height();
    const scrollTop = $(window).scrollTop();
    const winHeight = $(window).height();
    const sTop = pageHeight - scrollTop - winHeight;
    if (sTop > -100 && sTop <= 20) {
        console.log('end');
    }
});

這樣做的一個缺點就是比較消耗性能，因為當(dāng)在滾動的時候设褐，瀏覽器會無時不刻地在計算判斷是否滾動到底部的邏輯颠蕴，而在實際的場景中是不需要這么做的，在實際場景中可能是這樣的：在滾動過程中助析，每隔一段時間在去計算這個判斷邏輯犀被。而函數(shù)節(jié)流所做的工作就是每隔一段時間去執(zhí)行一次原本需要無時不刻地在執(zhí)行的函數(shù)，所以在滾動事件中引入函數(shù)的節(jié)流是一個非常好的實踐：

$(window).scroll(throttle(function() {
    // 判斷是否滾動到底部的邏輯
    const pageHeight = $('body').height();
    const scrollTop = $(window).scrollTop();
    const winHeight = $(window).height();
    const sTop = pageHeight - scrollTop - winHeight;
    if (sTop > -100 && sTop <= 20) {
        console.log('end');
    }
}), 300)
function throttle(fn, gapTime) {
    let _lastTime = null;
    return function () {
        let _nowTime = + new Date()
        if (_nowTime - _lastTime > gapTime || !_lastTime) {
            fn();
             _lastTime = _nowTime
        }
    }
}

加上函數(shù)節(jié)流之后外冀，當(dāng)頁面再滾動的時候寡键，每隔 300ms 才會去執(zhí)行一次判斷邏輯。

函數(shù)防抖例子：
以用戶注冊時驗證用戶名是否被占用為例雪隧，如今很多網(wǎng)站為了提高用戶體驗西轩，不會再輸入框失去焦點的時候再去判斷用戶名是否被占用员舵，而是在輸入的時候就在判斷這個用戶名是否已被注冊：

$('.user-name').on('input', function () {
    $.ajax({
        url: '/check',
        method: 'post',
        data: {
            username: $(this).val(),
        },
        success(data) {
            if (data.isRegistered) {
                $('.tips').text('該用戶名已被注冊！');
            } else {
                $('.tips').text('恭喜藕畔！該用戶名還未被注冊固灵！');
            }
        },
        error(error) {
            console.log(error);
        },
    });
});

很明顯，這樣的做法不好的是當(dāng)用戶輸入第一個字符的時候劫流，就開始請求判斷了巫玻，不僅對服務(wù)器的壓力增大了，對用戶體驗也未必比原來的好祠汇。而理想的做法應(yīng)該是這樣的仍秤，當(dāng)用戶輸入第一個字符后的一段時間內(nèi)如果還有字符輸入的話，那就暫時不去請求判斷用戶名是否被占用可很。在這里引入函數(shù)防抖就能很好地解決這個問題：

$('.user-name').on('input', debounce(function () {
    $.ajax({
        url: '/check',
        method: 'post',
        data: {
            username: $(this).val(),
        },
        success(data) {
            if (data.isRegistered) {
                $('.tips').text('該用戶名已被注冊诗力！');
            } else {
                $('.tips').text('恭喜！該用戶名還未被注冊我抠！');
            }
        },
        error(error) {
            console.log(error);
        },
    });
}), 300);
function debounce(fn, interval) {
    let timeout = null;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, interval);
    };
}

通過閉包保存一個標記來保存 setTimeout 返回的值苇本，每當(dāng)用戶輸入的時候把前一個 setTimeout clear 掉，然后又創(chuàng)建一個新的 setTimeout菜拓，這樣就能保證輸入字符后的 interval 間隔內(nèi)如果還有字符輸入的話瓣窄，就不會執(zhí)行 fn 函數(shù)了。

函數(shù)防抖和函數(shù)節(jié)流是在時間軸上控制函數(shù)的執(zhí)行次數(shù)纳鼎。
使用函數(shù)節(jié)流與函數(shù)防抖可以節(jié)約計算機資源

本文部分內(nèi)容從其他技術(shù)分享中學(xué)習(xí)俺夕，希望對你有所幫助
拓展閱讀：https://justclear.github.io/throttle-and-debounce/