Menafsirkan pengatur waktu javascript I

Catatan: Artikel ini dikutip dari buku "Rahasia Ninja JavaScript" oleh John Resig . Saya menerjemahkannya untuk pembelajaran semua orang saja. Mohon koreksi saya jika ada kekurangan dalam terjemahan.

Artikel ini terutama menjelaskan pengatur waktu dari aspek berikut:

1. Ikhtisar pengatur waktu;
2. Analisis mendalam tentang kecepatan pengatur waktu;
3. Gunakan pengatur waktu untuk menangani tugas-tugas besar;
4. Gunakan pengatur waktu untuk mengelola animasi;
5. Pengujian pengatur waktu yang lebih baik

Pengatur waktu adalah sesuatu yang sedikit kita pahami dan sering disalahgunakan. Faktanya, ini dapat banyak membantu kita dalam pengembangan aplikasi yang kompleks. Pengatur waktu memberikan kemampuan untuk menunda eksekusi fragmen kode secara asinkron. JavaScript pada dasarnya bersifat single-thread (hanya sebagian dari kode js yang dapat dijalankan dalam rentang waktu tertentu). Pengatur waktu memberi kita cara untuk menghindari metode pembatasan ini, sehingga membuka mencari cara lain untuk mengeksekusi kode.

Menariknya, bertentangan dengan kepercayaan umum, pengatur waktu bukanlah bagian dari bahasa JavaScript, namun merupakan bagian dari metode dan objek yang diperkenalkan oleh browser. Artinya, jika Anda memilih untuk menjalankannya di lingkungan non-browser, kemungkinan besar pengatur waktunya tidak akan ada dan Anda harus mengimplementasikan versi Anda sendiri menggunakan fungsi tertentu (seperti thread Rhino).

1. Cara kerja pengatur waktu

Pada dasarnya, penting untuk memahami cara kerja pengatur waktu. Seringkali perilaku pengatur waktu tidak intuitif karena berada di thread terpisah, mari kita mulai dengan pengujian tiga fungsi, yang masing-masing fungsi kita memiliki kesempatan untuk membuat dan mengontrol pengatur waktu.

• var id = setTimeout(fn,delay); memulai pengatur waktu yang akan memanggil fungsi tertentu setelah waktu tunda. Fungsi tersebut mengembalikan ID unik, yang dapat digunakan untuk membatalkan pengatur waktu di lain waktu;
• var id = setInterval(fn,delay); mirip dengan setTimeout, tetapi terus memanggil fungsi (pada waktu tunda tertentu) hingga dibatalkan;
• clearInterval(id), clearTimeout(id); menerima ID pengatur waktu (dikembalikan oleh salah satu fungsi di atas) dan berhenti memanggil pengatur waktu.

Untuk memahami cara kerja pengatur waktu secara internal, ada konsep penting yang perlu didiskusikan: penundaan tidak dijamin. Karena semua JavaScript di browser berjalan dalam satu thread, kejadian asinkron (seperti klik mouse, pengatur waktu) hanya akan berjalan ketika ada status terbuka selama eksekusi.

Ada banyak informasi yang perlu dicerna dalam diagram ini, memahaminya sepenuhnya akan memberi Anda gambaran yang lebih baik tentang eksekusi js asinkron, diagramnya satu dimensi, dalam arah vertikal adalah waktu (jam dinding), diukur dalam milidetik. Kotak biru mewakili proporsi eksekusi js. Misalnya, blok javascript pertama membutuhkan waktu sekitar 18 detik untuk dijalankan, klik mouse membutuhkan waktu sekitar 11 detik, dan seterusnya.