HTML5 memasukkan deteksi waktu nyata dan pengoptimalan penundaan

Ada proyek di mana kotak masukan memonitor masukan secara real time dan memicu permintaan.

Ide pertama adalah menggunakan metode onchange() pada input. Saya mencobanya, tetapi tidak berhasil. Ini hanya akan dipicu setelah perubahan nilai dikonfirmasi, yang tidak langsung.

Saya memeriksa secara online,

 $(#fix).on('input propertychange', function(event){});

Metode ini berhasil, namun berubah secara real-time. Frekuensi pengiriman agak cepat.

Cepat dan tambahkan pengatur waktu setTimeout.

 $(#fix).on('input propertychange', function(event){ setTimeout(function(){ //Tunda 0,5 detik untuk mengeksekusi console.log($(#fix).val()) },500); } );

Masalahnya muncul lagi. Pengatur waktunya tidak sinkron, meskipun tertunda, namun tetap dijalankan tanpa perubahan apa pun.

Kemudian, saya memikirkan untuk melepas ikatan dan mengikat, tetapi tidak ada aktivitas masukan keyboard yang dapat diperoleh selama waktu pelepasan ikatan.

Ide pertama pada saat itu adalah memicu peristiwa - menghapus pengatur waktu - menambahkan pengatur waktu - menjalankan fungsinya. Saya menemukan itu masih kurang bagus dan pengatur waktunya tidak dapat dihapus, jadi saya berhenti menjalankannya.

Akhirnya saya cek online dan menemukan metode baru.

Metode stempel waktu.

Prinsipnya adalah setiap kali variabel global dan stempel waktu diubah dengan input, stempel waktu baru akan dipantau dengan penundaan 0,5 detik dan sama dengan stempel waktu terikat, lalu lanjutkan ke langkah berikutnya.

-----html-----

 <input type=text id=fix>------script-----var last;$(#fix).on('input propertychange', function(event){ //#fix adalah milik Anda input Box last = event.timeStamp; //Gunakan timeStamp event untuk menandai waktu, sehingga setiap event akan mengubah nilai last. Perhatikan bahwa last harus berupa variabel global setTimeout(function(){ //Tetapkan penundaan waktu sebesar 0,5 s untuk mengeksekusi if(last -event.timeStamp==0) //Jika perbedaan waktu adalah 0 (artinya, tidak ada peristiwa keyup lain yang terjadi dalam 0,5 detik setelah Anda berhenti mengetik), lakukan apa yang ingin Anda lakukan { console.log($(#fix).val()) } } , 500);});

Di atas adalah deteksi waktu nyata masukan HTML5 dan pengoptimalan penundaan yang diperkenalkan oleh editor kepada Anda. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!