mencekik
Throttle yang kita bicarakan di sini berarti fungsi pelarangan. Sederhananya, pengontrol frekuensi panggilan fungsi adalah dengan terus melakukan kontrol interval waktu. Skenario aplikasi utama seperti:
1. Acara Pindah Mouse
2. Penempatan Dinamis Elemen Dom, Ubah Ubah dan Gulir Acara Objek Jendela
Beberapa orang dengan jelas membandingkan insiden yang disebutkan di atas dengan strafing senapan mesin. Throttle adalah pemicu senapan mesin. Jika Anda tidak meletakkan pemicunya, itu akan terus menembak. Hal yang sama berlaku untuk peristiwa di atas yang kami gunakan selama pengembangan. Jika Anda tidak melepaskan mouse, acaranya akan selalu dipicu. Misalnya:
Salinan kode adalah sebagai berikut:
var resizetimer = null;
$ (window) .on ('mengubah ukuran', fungsi () {
if (resizetimer) {
ClearTimeout (resizetimer)
}
resizeTimer = setTimeout (function () {
Console.log ("Window Ubaran");
}, 400);
Debounce
Debounce sangat mirip dengan Throttle. Debounce adalah metode yang akan dieksekusi ketika waktu luang harus lebih besar dari atau sama dengan nilai tertentu. Debounce adalah kontrol interval waktu luang. Misalnya, ketika kita melakukan secara otomatis, kita perlu mengontrol interval waktu memanggil metode saat memasukkan teks. Secara umum, karakter input pertama mulai menelepon segera, dan metode yang dieksekusi berulang kali dipanggil sesuai dengan interval waktu tertentu. Ini sangat berguna untuk input abnormal, seperti menahan yang tertentu dan tidak meletakkannya.
Skenario aplikasi utama Debounce adalah:
Acara Keydown Input Teks, Keyup Event, misalnya, AutoComplete
Ada banyak metode untuk jenis online ini, seperti underscore.js merangkum throttle dan debounce. JQuery juga memiliki plug-in untuk throttle dan debounce: jQuery throttle/debounce. Semua prinsip adalah sama dan fungsi yang sama diimplementasikan. Berikut ini adalah fungsi kontrol throttle dan debounce lain yang telah saya gunakan lagi:
Salinan kode adalah sebagai berikut:
/*
* Ketika fungsi pengembalian kontrol frekuensi dipanggil terus menerus, frekuensi eksekusi FN terbatas pada berapa kali dieksekusi setiap saat
* @param fn {function} fungsi yang perlu dipanggil
* @param delay {angka} waktu tunda dalam milidetik
* @param segera {bool} lulus false ke parameter langsung fungsi terikat dieksekusi terlebih dahulu, daripada tertunda dan kemudian dieksekusi.
* @return {function} sebenarnya memanggil fungsi
*/
var throttle = function (fn, delay, langsung, debounce) {
var curr = +tanggal baru (), // acara saat ini
last_call = 0,
last_exec = 0,
timer = null,
Diff, // Perbedaan Waktu
konteks, // konteks
Args,
exec = function () {
last_exec = Curr;
fn.Apply (konteks, args);
};
return function () {
Curr = +tanggal baru ();
konteks = ini,
args = argumen,
Diff = Curr - (debounce? Last_call: last_exec) - tunda;
ClearTimeout (timer);
if (debounce) {
if (langsung) {
timer = setTimeout (exec, delay);
} lain jika (diff> = 0) {
exec ();
}
} kalau tidak {
if (diff> = 0) {
exec ();
} lain jika (segera) {
timer = setTimeout (exec, -diff);
}
}
last_call = Curr;
}
};
/*
* Ketika fungsi pengembalian kontrol idle disebut terus menerus, waktu idle harus lebih besar dari atau sama dengan penundaan sebelum FN akan dieksekusi.
* @param fn {function} fungsi yang akan dipanggil
* @param delay {number} waktu luang
* @param segera {bool} lulus false ke parameter langsung fungsi terikat dieksekusi terlebih dahulu, daripada tertunda dan kemudian dieksekusi.
* @return {function} sebenarnya memanggil fungsi
*/
var debounce = function (fn, delay, langsung) {
return throttle (fn, delay, langsung, benar);