Fungsi JavaScript paling dasar di halaman web adalah mendengarkan atau menanggapi tindakan pengguna, yang sangat berguna. Tindakan beberapa pengguna sangat sering, sementara yang lain sangat jarang. Beberapa fungsi pendengar dieksekusi seperti petir, sementara beberapa berat untuk menyeret browser sampai mati. Ambil ubah ukuran jendela browser misalnya. Acara ini akan dipicu sekali dalam setiap perubahan skala dalam ukuran jendela browser. Jika pendengar besar, browser Anda akan segera diseret ke bawah.
Jelas, kami tidak dapat membiarkan browser diseret ke bawah, tetapi kami tidak dapat menghapus pendengar. Namun, kami dapat membatasi frekuensi panggilan fungsi dan melemahkan dampak operasi fungsi peristiwa. Dibandingkan dengan membiarkan perubahan ukuran jendela memicu fungsi pendengar sekali, kita sekarang dapat mendengarkan interval minimum pemicu fungsi yang harus lebih besar dari berapa milidetik, sehingga mempertahankan saluran panggilan yang masuk akal dan memastikan bahwa pengalaman pengguna tidak hancur. Ada perpustakaan alat JS yang baik yang disebut Underscore.js, yang memiliki metode sederhana yang memungkinkan Anda untuk dengan mudah membuat pendengar yang mengurangi frekuensi fungsi acara.
Kode JavaScript
Kode untuk pendengar Downswitch sederhana:
Salinan kode adalah sebagai berikut:
// Buat pendengar
var updateLayout = _.debounce (function (e) {
// Apakah semua tata letak memperbarui di sini
}, 500); // Jalankan sekali setiap 500 milidetik setidaknya
// Tambahkan pendengar acara
window.addeventlistener ("mengubah ukuran", updateLayout, false);
... Lapisan yang mendasari kode underscore.js ini sebenarnya menggunakan interval untuk memeriksa frekuensi panggilan fungsi peristiwa:
// Mengembalikan fungsi, bahwa, asalkan terus dipanggil, tidak akan
// dipicu. Fungsi akan dipanggil setelah berhenti dipanggil
// n milidetik. Jika `langsung` dilewatkan, memicu fungsi pada
// Tepi terdepan, bukannya trailing.
_.debounce = function (func, tunggu, langsung) {
var timeout;
return function () {
var context = this, args = argumen;
var nanti = function () {
timeout = null;
if (! segera) func.Apply (konteks, args);
};
var callnow = segera &&! Timeout;
ClearTimeout (timeout);
timeout = setTimeout (nanti, tunggu);
if (callnow) func.Amply (konteks, args);
};
};
Kode ini tidak terlalu rumit, tetapi juga semacam kebahagiaan untuk tidak harus menulisnya sendiri. Fungsi debounce ini tidak tergantung pada fungsi underscore.js lainnya, sehingga Anda dapat menambahkan metode ini ke perpustakaan alat JS favorit Anda, seperti jQuery atau mootools, yang mudah:
Salinan kode adalah sebagai berikut:
// mootools
Function.implement ({
debounce: function (tunggu, segera) {
var timeout,
func = ini;
return function () {
var context = this, args = argumen;
var nanti = function () {
timeout = null;
if (! segera) func.Apply (konteks, args);
};
var callnow = segera &&! Timeout;
ClearTimeout (timeout);
timeout = setTimeout (nanti, tunggu);
if (callnow) func.Amply (konteks, args);
};
}
});
// Gunakan itu!
window.addevent ("mengubah ukuran", myfn.debounce (500));
Seperti disebutkan di atas, ubah ukuran jendela adalah tempat yang paling umum untuk menggunakan operasi frekuensi ke bawah. Tempat umum lainnya adalah bahwa prompt penyelesaian otomatis diberikan berdasarkan input kunci pengguna. Saya sangat suka mengumpulkan cuplikan kode seperti itu, yang dapat dengan mudah membuat situs web Anda lebih efisien. Pada saat yang sama, saya juga menyarankan Anda mempelajari underscore.js, yang menyediakan sejumlah besar fungsi yang sangat berguna.