Foto oleh Chris Liverani di Unsplash

Debounce vs Throttle vs Eksekusi antrian

Kami memiliki banyak artikel di internet yang menjelaskan apa itu Debouncing, Throttling, dan apa perbedaannya. Tetapi kebanyakan yang saya temukan sering panjang, membingungkan dan dengan contoh kode yang rumit (jika ada).

Jadi saya telah datang dengan contoh kode kerja yang disederhanakan bagi mereka untuk mendapatkan konsep dalam sekejap. Mari kita mulai dengan yang lebih mudah, Debounce.

Debounce

Debouncing suatu fungsi sangat berguna ketika sedang dipanggil terus menerus dan kami ingin menjalankannya setelah periode tertentu jika waktu telah berlalu sejak panggilan terakhir.

Ini sangat berguna dalam kasus di mana kita ingin situasi menjadi stabil sebelum memanggil pawang untuk meningkatkan kinerja. Salah satu contoh terbaik debounce yang saya temukan ada di blog ini oleh Jhey Tompkins

Untuk debouncing, kami dapat memiliki beberapa fitur simpan otomatis di aplikasi kami. Dengan penyimpanan otomatis pada aplikasi, cobalah untuk menyimpan status aplikasi kami setiap kali pengguna melakukan pembaruan atau berinteraksi. Itu menunggu 5 detik untuk memastikan tidak ada pembaruan atau interaksi lain dilakukan sebelum menyimpan negara lain itu mencatat negara baru dan mengulangi proses. Jika terjadi interaksi, reset timernya selama 5 detik lagi.

function debounce (func, waitTime) {
    var timeout;

    fungsi pengembalian () {
        clearTimeout (batas waktu);
        timeout = setTimeout (func, waitTime);
    };
};

Itu saja, itulah cara sederhana melakukan bouncing.

Mencekik

Teknik ini lebih tepat dinamai. Melambatkan suatu fungsi sangat berguna ketika sedang dipanggil terus menerus dan kami ingin menjalankannya setiap x detik. Contoh yang baik dari hal ini adalah penangan gulir atau penangan ukuran, di mana kita ingin menjalankan penangan sekali dalam periode waktu yang tetap bahkan jika fungsinya dipanggil terus menerus.

function throttle (func, waitTime) {
    var timeout = null;
    var sebelumnya = 0;

    var nanti = function () {
        sebelumnya = Date.now ();
        batas waktu = nol;
        func ();
    };

    fungsi pengembalian () {
        var sekarang = Date.now ();
        var tersisa = waitTime - (sekarang - sebelumnya);
        if (tersisa <= 0 || tersisa> waitTime) {
            if (timeout) {
                clearTimeout (batas waktu);
            }
            kemudian();
        } lain jika (! timeout) {// null timeout -> tidak ada eksekusi yang tertunda
            
            timeout = setTimeout (nanti, tersisa);
        }
    };
};

Ekstra: Mengantri

Pada garis debounce dan throttle, pemanggilan fungsi juga dapat diatur. Dalam fungsi ini dieksekusi berapa kali dipanggil tetapi ada waktu tunggu yang tetap sebelum setiap eksekusi. Baru-baru ini berguna bagi saya ketika saya menggunakan perpustakaan dan bertemu dengan bug yang memanggil fungsi di dalamnya beberapa kali tanpa penundaan yang menyebabkan masalah. (bisa juga ada kasus penggunaan lain :))

function queue (func, waitTime) {
    var funcQueue = [];
    var isWaiting;

    var executeFunc = function (params) {
        isWaiting = true;
        func (params);
        setTimeout (main, waitTime);
    };

    var play = function () {
        isWaiting = false;
        if (funcQueue.length) {
            var params = funcQueue.shift ();
            executeFunc (params);
        }
    };

    fungsi pengembalian (params) {
        if (isWaiting) {
            funcQueue.push (params);
        } lain {
            executeFunc (params);
        }
    }
};

Untuk menyimpulkan

Sebelum Anda memutuskan teknik pengoptimalan, mundur dan pikirkan mana yang akan memberikan hasil terbaik untuk kasus itu. Selalu ada satu yang akan lebih banyak performan.

Silakan tinggalkan respons atau tweet saya dengan pertanyaan atau saran.