Perbedaan Antara melambat dan melemahkan suatu fungsi

Adakah yang bisa memberi saya penjelasan sederhana-kata tentang perbedaan antara melambatkan dan melemahkan fungsi untuk tujuan pembatasan tingkat.

Bagi saya keduanya tampaknya melakukan hal yang sama. Saya telah memeriksa dua blog ini untuk mencari tahu:

http://remysharp.com/2010/07/21/throttling-function-calls

http://benalman.com/projects/jquery-throttle-debounce-plugin/

Secara sederhana:

• Throttling akan menunda mengeksekusi suatu fungsi. Ini akan mengurangi notifikasi dari suatu peristiwa yang menyala berulang kali.
• Debouncing akan mengelompokkan serangkaian panggilan berurutan ke suatu fungsi menjadi satu panggilan ke fungsi itu. Ini memastikan bahwa satu pemberitahuan dibuat untuk acara yang menyala berulang kali.

Anda dapat melihat perbedaannya secara visual di sini

Jika Anda memiliki fungsi yang sering dipanggil - misalnya saat acara pengubahan ukuran atau perpindahan mouse, ini dapat disebut berkali-kali. Jika Anda tidak menginginkan perilaku ini, Anda dapat mencekiknya sehingga fungsinya dipanggil secara berkala. Debouncing berarti itu disebut pada akhir (atau awal) dari banyak peristiwa.

Secara pribadi saya temukan debounce lebih sulit untuk dipahami daripada throttle .

Karena kedua fungsi ini membantu Anda menunda dan mengurangi laju beberapa eksekusi. Anggap Anda memanggil fungsi-fungsi yang dihiasi yang dikembalikan oleh throttle / debounce berulang kali ...

• Mencekik : fungsi asli dipanggil paling banyak sekali per periode yang ditentukan.
• Debounce : fungsi asli dipanggil setelah pemanggil berhenti memanggil fungsi yang didekorasi setelah periode tertentu .

Saya menemukan bagian terakhir debounce penting untuk memahami tujuan yang ingin dicapai. Saya juga menemukan versi lama implementasi _.debounce membantu pemahaman (milik https://davidwalsh.name/function-debounce ).

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

Metafora yang dibuat-buat, tapi mungkin juga bisa membantu.

Anda memiliki teman bernama Chatty yang suka berbicara dengan Anda melalui IM. Dengan asumsi ketika dia berbicara dia mengirim pesan baru setiap 5 detik, sementara ikon aplikasi IM Anda memantul ke atas dan ke bawah, Anda dapat ...

• NaifPendekatan : periksa setiap pesan selama pesan diterima. Saat ikon aplikasi Anda memantul, periksa. Ini bukan cara yang paling efektif, tetapi Anda selalu up-to-date.
• MencekikPendekatan : Anda memeriksa setiap 5 menit (bila ada yang baru). Ketika pesan baru tiba, jika Anda telah memeriksa kapan saja dalam 5 menit terakhir, abaikan saja. Anda menghemat waktu Anda dengan pendekatan ini, saat masih dalam lingkaran.
• Pendekatan debounce : Anda tahu Chatty, dia memecah cerita keseluruhan menjadi berkeping-keping, mengirimkannya dalam satu pesan demi satu. Anda menunggu sampai Chatty menyelesaikan keseluruhan cerita: jika dia berhenti mengirim pesan selama 5 menit, Anda akan menganggap dia telah selesai, sekarang Anda memeriksa semua.

Perbedaan

+--------------+-------------------+-------------------+
|              |  Throttle 1 sec   |  Debounce 1 sec   |
+--------------+-------------------+-------------------+
| Delay        | no delay          | 1 sec delay       |
|              |                   |                   |
| Emits new if | last was emitted  | there is no input |
|              | before 1 sec      |  in last 1 sec    |
+--------------+-------------------+-------------------+

Penjelasan berdasarkan use case :

• Bilah pencarian - Tidak ingin mencari setiap kali pengguna menekan tombol? Ingin mencari ketika pengguna berhenti mengetik selama 1 detik. Gunakan debounce1 detik pada tombol tekan.

• Shooting game - Pistol mengambil 1 detik waktu antara setiap tembakan tetapi pengguna mengklik mouse beberapa kali. Gunakan throttlepada klik mouse.

Membalikkan peran mereka :

• Pembatasan 1 detik pada bilah pencarian - Jika pengguna mengetik abcdefghijdengan setiap karakter di 0.6 sec. Kemudian throttle akan memicu pada apers pertama . Ini akan mengabaikan setiap pers untuk 1 detik berikutnya yaitu b0,6 detik akan diabaikan. Kemudian cpada 1,2 detik lagi akan memicu, yang me-reset waktu lagi. Jadi dakan diabaikan dan eakan dipicu.

• Menembakkan pistol selama 1 detik - Saat pengguna melihat musuh, ia mengklik mouse, tetapi tidak akan menembak. Dia akan mengklik lagi beberapa kali dalam detik itu tetapi tidak akan menembak. Dia akan melihat apakah masih ada peluru, pada saat itu (1 detik setelah klik terakhir) pistol akan menembak secara otomatis.

Pelambatan memberlakukan jumlah maksimum suatu fungsi yang dapat dipanggil dari waktu ke waktu. Seperti pada "jalankan fungsi ini paling banyak sekali setiap 100 milidetik."

Debouncing memberlakukan bahwa suatu fungsi tidak dipanggil lagi sampai sejumlah waktu telah berlalu tanpa dipanggil. Seperti dalam "jalankan fungsi ini hanya jika 100 milidetik telah berlalu tanpa dipanggil."

ref

Throttle (1 detik): Halo, saya seorang robot. Selama Anda terus mem-ping saya, saya akan terus berbicara dengan Anda, tetapi setelah masing-masing tepat 1 detik. Jika Anda mem-ping saya untuk balasan sebelum sedetik berlalu, saya masih akan membalas Anda tepat pada interval 1 detik. Dengan kata lain, saya suka sekali membalas pada interval yang tepat.

Debounce (1 dtk): Hai, saya adalah sepupu robot ^^ itu. Selama Anda terus mem-ping saya, saya akan tetap diam karena saya ingin membalas hanya setelah 1 detik berlalu sejak terakhir kali Anda mem-ping saya . Saya tidak tahu, apakah itu karena saya memiliki masalah sikap atau karena saya tidak suka mengganggu orang. Dengan kata lain, jika Anda terus meminta saya untuk balasan sebelum 1 detik telah berlalu sejak doa terakhir Anda, Anda tidak akan pernah mendapat balasan. Yeah yeah ... silakan! panggil aku kasar.

Throttle (10 mnt): Saya adalah mesin logging. Saya mengirim log sistem ke server backend kami, setelah interval reguler 10 menit.

Debounce (10 detik): Hai, saya bukan sepupu dari mesin logging itu. (Tidak semua debouncer terkait dengan throttler di dunia imajiner ini). Saya bekerja sebagai pelayan di restoran terdekat. Saya harus memberi tahu Anda bahwa selama Anda terus menambahkan barang ke pesanan Anda, saya tidak akan pergi ke dapur untuk melaksanakan pesanan Anda. Hanya ketika 10 detik telah berlalu setelah Anda terakhir mengubah pesanan Anda, saya akan menganggap bahwa Anda selesai dengan pesanan Anda. Baru setelah itu saya akan melaksanakan pesanan Anda di dapur.

Demo Keren: https://css-tricks.com/debouncing-throttling-explained-examples/

Penghargaan untuk analogi pelayan: https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

Debouncing memungkinkan Anda untuk mengatur frekuensi panggilan yang dapat diterima fungsi. Ini menggabungkan beberapa panggilan yang terjadi pada fungsi yang diberikan sehingga panggilan berulang yang terjadi sebelum berakhirnya durasi waktu tertentu diabaikan. Pada dasarnya debouncing memastikan bahwa satu sinyal dikirim untuk suatu peristiwa yang mungkin terjadi beberapa kali.

Throttling membatasi frekuensi panggilan yang diterima suatu fungsi ke interval waktu tertentu. Ini digunakan untuk memastikan bahwa fungsi target tidak dipanggil lebih sering daripada penundaan yang ditentukan. Throttling adalah pengurangan tingkat kejadian berulang.

Itu mudah.

Mereka melakukan hal yang sama persis (pembatasan tingkat) kecuali ketika throttle sedang dipanggil itu akan menjalankan fungsi Anda yang dibungkus secara berkala, dan debounce tidak akan. Debounce hanya (mencoba) memanggil fungsi Anda sekali di akhir.

Contoh : Jika Anda menggulir, throttle akan memanggil fungsi Anda secara perlahan saat Anda menggulir (setiap X milidetik). Debounce akan menunggu sampai setelah Anda selesai menggulir untuk memanggil fungsi Anda.

Dalam istilah awam:

Debouncing akan mencegah suatu fungsi berjalan saat masih sering dipanggil. Fungsi yang dideboed hanya akan berjalan setelah telah ditentukan bahwa itu tidak lagi dipanggil, pada titik mana ia akan berjalan tepat sekali. Contoh praktis dari pelepasan:

• Menyimpan otomatis atau memvalidasi konten bidang teks jika pengguna "berhenti mengetik": operasi hanya akan dilakukan sekali, SETELAH telah ditentukan bahwa pengguna tidak lagi mengetik (tidak lagi menekan tombol).

• Masuk tempat pengguna meletakkan mouse mereka: pengguna tidak lagi menggerakkan mouse mereka, sehingga posisi (terakhir) dapat dicatat.

Throttling hanya akan mencegah fungsi berjalan jika telah berjalan baru-baru ini, terlepas dari frekuensi panggilan. Contoh praktis pelambatan:

• Implementasi v-sync didasarkan pada pembatasan: layar hanya akan ditarik jika 16ms berlalu sejak penarikan layar terakhir. Tidak peduli berapa kali fungsi refresh layar disebut, itu hanya akan berjalan paling banyak sekali setiap 16 ms.

Analogi kehidupan nyata yang secara pribadi membantu saya mengingat:

• debounce = sebuah percakapan . Anda menunggu orang lain selesai berbicara sebelum Anda membalas.
• throttle = sedikit drum . Anda hanya memainkan catatan pada drum 4/4 sederhana.

Gunakan kasing untuk debounce :

• Mengetik. Anda ingin melakukan sesuatu setelah pengguna berhenti mengetik. Jadi, menunggu 1 detik setelah keystroke terakhir masuk akal. Setiap keystroke memulai kembali menunggu.
• Animasi. Anda ingin mengecilkan kembali suatu elemen setelah pengguna berhenti melayang di atasnya. Tidak menggunakan debounce dapat menyebabkan animasi yang tidak menentu karena kursor bergerak secara tidak sengaja antara zona "panas" dan "dingin".

Gunakan case untuk throttle :

• Bergulir Anda ingin bereaksi terhadap pengguliran tetapi membatasi jumlah perhitungan yang dibuat, jadi melakukan sesuatu setiap 100 ms sudah cukup untuk mencegah potensi jeda.
• Gerakan mouse. Sama seperti menggulir tetapi untuk gerakan mouse.
• Panggilan API Anda ingin memecat panggilan API pada acara UI tertentu tetapi ingin membatasi jumlah panggilan API yang Anda buat untuk tidak membebani server Anda.

throtle hanyalah pembungkus debounce yang membuat debounce untuk panggilan disahkan functiondalam beberapa periode waktu, jika debounce menunda pemanggilan fungsi pada periode waktu yang lebih besar dari yang ditentukan dalam throtle .

perpustakaan lodash menyarankan artikel berikut https://css-tricks.com/debouncing-throttling-explained-examples/ yang merinci menjelaskan perbedaan antara Debouncedan Throttledan asal usulnya

Pelambatan

Pelambatan memberlakukan jumlah maksimum suatu fungsi yang bisa disebut lembur. Seperti pada "jalankan fungsi ini paling banyak sekali setiap 100 milidetik." Katakan dalam keadaan normal Anda akan memanggil fungsi ini 1.000 kali selama 10 detik. Jika Anda menekannya hanya sekali per 100 milidetik, itu hanya akan menjalankan fungsi itu paling banyak 100 kali

(10s * 1,000) = 10,000ms
10,000ms / 100ms throttling = 100 maximum calls

Debouncing

Debouncing memberlakukan bahwa suatu fungsi tidak dipanggil lagi sampai sejumlah waktu telah berlalu tanpa dipanggil. Seperti dalam "jalankan fungsi ini hanya jika 100 milidetik telah berlalu tanpa dipanggil."

Mungkin fungsi dipanggil 1.000 kali dalam ledakan cepat, tersebar lebih dari 3 detik, lalu berhenti dipanggil. Jika Anda telah melonggarkannya pada 100 milidetik, fungsi hanya akan menyala sekali, pada 3,1 detik, setelah ledakan selesai. Setiap kali fungsi dipanggil selama burst itu me-reset timer debouncing

sumber: - throttle dan debouncing

Misalkan kita memiliki fungsi panggilan balik "cb" untuk dipanggil pada acara "E". Biarkan "E" dipicu 1000 kali dalam 1 detik, maka akan ada 1000 panggilan ke "cb". Itu adalah 1 panggilan / ms. Untuk mengoptimalkan, kami dapat menggunakan:

• Throttling : Dengan throttling (100 ms), "cb" akan dipanggil [100 ms, 200 ms, 300 ms, ... 1000 ms]. Itu adalah 1 panggilan / 100 ms. Di sini 1000 panggilan ke "cb" dioptimalkan untuk 10 panggilan.
• Debouncing : Dengan debouncing (100 ms), "cb" akan dipanggil hanya sekali pada [1100 detik]. Itu 100 ms setelah pemicu terakhir "E" yang terjadi pada [1000 ms]. Di sini 1000 panggilan ke "cb" dioptimalkan untuk 1 panggilan.

Sejauh yang saya mengerti, secara sederhana Throttling - mirip dengan memanggil setInterval (panggilan balik) untuk beberapa kali yaitu memanggil fungsi yang sama untuk beberapa kali dari waktu ke waktu terjadinya peristiwa dan .. Debouncing - mirip dengan memanggil setTImeout (callbackForApi) atau memanggil fungsi setelah waktu tertentu berlalu pada terjadinya acara. Tautan ini dapat membantu- https://css-tricks.com/the-ddference-between-throttling-and-debouncing/