Artikel ini menjelaskan konsep dan penggunaan fungsi JavaScript. Bagikan untuk referensi Anda, sebagai berikut:
Baru -baru ini, ketika saya membuat halaman web, saya memiliki persyaratan, yaitu mengubah beberapa ukuran elemen halaman ketika jendela browser berubah, jadi saya secara alami memikirkan acara mengubah ukuran jendela, jadi saya menulis ini
<! Doctype html> <html> <head> <title> throttle </itement> </head> <body> <script type = "text/javascript"> n = 0; function resizeHandler () {console.log (new date (). getTime ()); console.log (++ n); } window.onResize = resizeHandler; </script> </body> </html>Fungsinya diimplementasikan, tetapi ketika saya menyeret dan menjatuhkan cara saya mengubah ukuran jendela browser, saya melihat konsol
Itu benar, seret dan drop sederhana membuat metode resizeHandler () saya mengeksekusi 52 kali, yang bukan efek yang saya inginkan sama sekali. Faktanya, kode metode resizeHandler () saya sangat rumit, dan saya bahkan menggunakan AJAX untuk mengirim permintaan ke server. Jika saya hanya mengubah ukuran jendela sekaligus, saya harus menelepon 52 kali. Ini masalah besar.
Fungsi Throttling
Bahkan, niat asli saya adalah untuk membuat beberapa penyesuaian pada halaman setelah jendela diubah ukurannya. Peristiwa ukuran jendela tidak dipicu setelah ubah ukuran berakhir. Saya tidak tahu frekuensi spesifik, tetapi terus -menerus menelepon sampai ukuran jendela tidak berubah. Faktanya, mekanisme dan mousemove yang serupa dipicu berulang kali dalam waktu singkat.
Ada fungsi yang mencekik yang secara khusus menangani masalah ini dalam pemrograman lanjutan JavaScript
fungsi throttle (metode, konteks) {clearTimeout (method.tid); method.tid = setTimeout (function () {Method.call (konteks);}, 500);}Prinsipnya sangat sederhana. Gunakan timer untuk menunda pelaksanaan fungsi dengan 500 milidetik. Jika suatu fungsi dipanggil lagi dalam waktu 500 milidetik, panggilan terakhir akan dihapus. Kali ini panggilan akan dieksekusi setelah 500 milidetik, dan ini akan diulang. Dengan cara ini, kode saya sekarang dapat diubah menjadi
<script type = "text/javascript"> n = 0; function resizeHandler () {console.log (tanggal baru (). getTime ()); console.log (++ n);} function throttle (Method, Context) {clearTimeout (Method.tid); method.tid = setTimeOut (function () {Method.call (konteks);}, 500);} window.onResize = function () {throttle (resizeHandler, window);}; </script>Coba seret dan seret, itu hanya dieksekusi
Cara lain untuk melakukannya
Ada juga solusi pelambatan fungsi online, yang melakukan ini
function throttle (metode, tunda) {var timer = null; return function () {var context = this, args = argumen; ClearTimeout (timer); timer = setTimeout (function () {Method.Apply (Context, args);}, tunda); }}Coba sebut saja, efek yang sama
<script type = "text/javascript"> n = 0; function resizeHandler () {console.log (tanggal baru (). getTime ()); console.log (++ n);} function throttle (metode, tunda) {var timer = null; return function () {var context = this, args = argumen; ClearTimeout (timer); timer = setTimeout (function () {Method.Apply (Context, args);}, tunda); }} window.onResize = throttle (resizeHandler, 500); // Karena pegangan fungsi dikembalikan, tidak perlu membungkus fungsi </script>Membandingkan
Kedua metode menggunakan SetTimeout. Perbedaannya adalah bahwa fungsi yang ditambahkan oleh metode kedua menunda waktu eksekusi. Ini mudah untuk memiliki fungsi ini dalam solusi pertama, menambahkan parameter.
Tetapi opsi pertama menetapkan TID sebagai variabel fungsi untuk disimpan, sedangkan opsi kedua membuat penutupan untuk disimpan. Saya pribadi berpikir kesenjangan itu tidak besar, dan saya suka yang pertama, yang sederhana dan efisien.
Permintaan baru
Suatu hari saya membuat sesuatu yang serupa, seperti prompt otomatis untuk dimasukkan di beranda Baidu. Saya mengikat acara Keyup pada teks. Secara otomatis mendorong setiap kali keyboard muncul, tetapi saya tidak ingin sering meminta. Jadi saya menggunakan metode di atas, tetapi tragis. Saya hanya menghentikan input dan menunggu 500 milidetik untuk meminta, dan tidak ada prompt sama sekali selama proses input. Saya melihat kode dan menemukan bahwa itu tidak benar. Selama pengguna akan mengetik secara membabi buta, tekan keyboard dalam waktu 500 milidetik, fungsi prompt akan terus tertunda. Ini hanya akan mendorong ketika saya berhenti, yang tidak ada artinya.
Bisakah itu dieksekusi sekali pada waktu yang tetap berdasarkan fungsi throttling?
Perubahan kecil
Saya mencari secara online dan kami dapat membuat beberapa perubahan berdasarkan metode penulisan kedua (yang pertama agak buruk untuk memperluas beberapa variabel untuk fungsi), dan menambahkan parameter karena interval tetap harus dieksekusi.
function throttle (metode, penundaan, durasi) {var timer = null, begin = new date (); return function () {var context = this, args = argumen, current = new date () ;; ClearTimeout (timer); if (saat ini-begin> = durasi) {method.Apply (konteks, args); mulai = saat ini; } else {timer = setTimeout (function () {Method.Apply (Context, args);}, tunda); }}}Dengan cara ini, kita akan menentukan berapa lama interval itu. Jika waktu pengaturan terlampaui, kami akan segera menjalankannya. Gunakan contohnya sekarang untuk mencoba efeknya
window.onresize = throttle (resizeHandler, 100.200);
Memang benar bahwa tidak ada eksekusi yang sering atau eksekusi akhir
Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Efek dan Teknik Peralihan Javascript", "Ringkasan Keterampilan Algoritma Pencarian JavaScript", "Ringkasan Teknik Animasi dan Teknik JavaScript," Ringkasan Ringkasan Data Javascript dan Ringkasan Data Javascript "," Ringkasan Data JavaScript "," Ringkasan Data JavaScript "," Ringkasan DEBUGRITM PENGABUNG DAN RINGKASI DAGGING "RINGKASI DAN RINGKASAN DATRICKS" RINGKASI DAN RINGKASI DAGGING "RINGKASI DAN RINGKASI DAGGING" RINGKAS Algoritma dan teknik traversal javascript ", dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.