Pengendali Timer pertama dan setInterval dalam seri BOM

setTimeout ()

Metode setTimeout () digunakan untuk menentukan bahwa fungsi atau string dijalankan setelah jumlah milidetik yang ditentukan. Ini mengembalikan bilangan bulat yang mewakili nomor timer, yang dapat diteruskan ke clearTimeout () untuk membatalkan eksekusi fungsi ini

Dalam kode berikut, konsol output 0 pertama, setelah sekitar 1000ms, yaitu, 1S, nilai pengembalian dari metode timer setTimeout () adalah output.

 var timer = setTimeout (function () {console.log (timer);}, 1000); console.log (0);

Ini juga dapat ditulis sebagai parameter string. Karena formulir ini akan menyebabkan mesin JavaScript diuraikan dua kali, mengurangi kinerja, tidak disarankan untuk menggunakannya.

 var timer = setTimeout ('console.log (timer);', 1000); console.log (0);

Jika parameter kedua dari SetTimeout dihilangkan, parameter default ke 0

Dalam kode berikut, 0 dan 1 muncul di konsol, tetapi 0 ada di depan, dan pertanyaan ini akan dijelaskan nanti.

 var timer = setTimeout (function () {console.log (timer);}); console.log (0);

Bahkan, selain dua parameter pertama, metode setTimeout () juga memungkinkan penambahan lebih banyak parameter, yang akan diteruskan ke fungsi dalam timer.

Dalam kode berikut, konsol akan menghasilkan 2 setelah sekitar 1000ms, yaitu 1s. Namun, IE9-browser hanya memungkinkan SetTimeout memiliki dua parameter, dan tidak mendukung lebih banyak parameter. Nan akan menjadi output pada konsol.

 setTimeout (function (a, b) {console.log (a+b);}, 1000,1,1);

Anda dapat menggunakan transfer parameter IIFE untuk kompatibel dengan transfer parameter fungsi IE9-browser

 setTimeout ((function (a, b) {return function () {console.log (a+b);}}) (1,1), 1000);

Atau tulis fungsi di luar timer, dan kemudian fungsi dipanggil dengan parameter dalam fungsi anonim dalam timer.

 tes fungsi (a, b) {console.log (a+b);} setTimeout (function () {test (1,1);}, 1000);

Ini menunjuk ke

Empat aturan mengikat yang ditunjukkan oleh mekanisme ini telah diperkenalkan secara rinci dalam seri ini. Karena ini dalam timer secara implisit hilang dan sangat rentan terhadap kesalahan, itu akan dijelaskan lagi di sini.

 var a = 0; function foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} setTimeout (obj.foo, 100); // 0 // setara dengan var a = 0; setTimeout (function foo () {console.log (this.a);

Jika Anda ingin mendapatkan nilai properti A dalam objek OBJ, Anda dapat menempatkan fungsi obj.foo dalam fungsi anonim dalam timer untuk mengikat implisit.

 var a = 0; function foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} setTimeout (function () {obj.foo ();}, 100); // 2

Atau Anda dapat menggunakan metode BIND untuk mengikat metode foo () ini untuk obj

 var a = 0; function foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} setTimeout (obj.foo.bind (obj), 100); // 2

ClearTimeout ()

Fungsi SetTimeout Mengembalikan nilai integer yang mewakili nomor penghitung, lewati integer ke fungsi ClearTimeout, membatalkan timer yang sesuai

 // Setelah 100ms, konsol mengeluarkan nilai pengembalian metode setTimeout () 1var timer = setTimeout (function () {console.log (timer);}, 100);

Oleh karena itu, nilai ini dapat digunakan untuk membatalkan timer yang sesuai

 var timer = setTimeout (function () {console.log (timer);}, 100); ClearTimeout (timer);

Atau gunakan nilai pengembalian secara langsung sebagai parameter

 var timer = setTimeout (function () {console.log (timer);}, 100); ClearTimeout (1);

Secara umum, nilai integer yang dikembalikan oleh SetTimeout adalah kontinu, yaitu nilai integer yang dikembalikan dengan metode setTimeout kedua adalah 1 lebih besar dari nilai integer pertama.

 // Output konsol 1, 2, 3var timer1 = setTimeOut (function () {console.log (timer1);}, 100); var timer2 = setTimeout (function () {console.log (timer2);}, 100); var timer3 = setTimeout (function () {console.log.

setInterval ()

Penggunaan SetInterval persis sama dengan SetTimeout. Satu -satunya perbedaan adalah bahwa setInterval menetapkan bahwa tugas dieksekusi sesekali, yaitu, eksekusi waktu tanpa batas waktu

 <tombol id = "btn"> 0 </button> <script> var timer = setInterval (function () {btn.innerHtml = angka (btn.innerHtml) + 1;}, 1000); btn.onclick = function () {clearInterval (timer); btn.innerh = function () {clearInterval (timer); btn.innerh

[Catatan] Standar HTML5 menetapkan bahwa interval waktu terpendek dari setTimeout adalah 4 milidetik; Interval terpendek dari setInterval adalah 10 milidetik, yaitu interval waktu kurang dari 10 milidetik akan disesuaikan dengan 10 milidetik

Frekuensi penyegaran sebagian besar monitor komputer adalah 60Hz, yang kira -kira setara dengan mengecat ulang 60 kali per detik. Oleh karena itu, interval loop optimal untuk efek animasi paling halus adalah 1000ms/60, yang kira -kira sama dengan 16,6ms

Untuk menghemat daya, browser memperluas interval waktu menjadi 1000 milidetik untuk halaman yang tidak ada di jendela saat ini. Selain itu, jika laptop bertenaga baterai, chrome dan yaitu 9 atau lebih akan mengalihkan interval waktu ke timer sistem, yaitu sekitar 16,6 milidetik

Mekanisme operasi

Mari kita jelaskan bagian pertanyaan sebelumnya, mengapa 0 muncul di depan 1 di hasil konsol kode di bawah ini?

 setTimeout (function () {console.log (1);}); console.log (0);

Bahkan, mengatur parameter kedua dari SetTimeout ke 0s tidak berarti mengeksekusi fungsi segera, tetapi hanya memasukkan fungsi ke dalam antrian kode.

Dalam contoh berikut, penangan acara diatur ke tombol BTN. Event Handler menetapkan timer untuk dihubungi setelah 250ms. Setelah mengklik tombol ini, pertama -tama tambahkan event handler OnClick ke antrian. Pengatur waktu ditetapkan setelah program dieksekusi. Setelah 250ms, kode yang ditentukan ditambahkan ke antrian dan menunggu eksekusi.

 btn.onClick = function () {setTimeOut (function () {console.log (1);}, 250);}

Jika event handler OnClick dalam kode di atas telah dieksekusi selama 300ms, kode timer harus dieksekusi setidaknya 300 ms setelah timer diatur. Semua kode dalam antrian harus menunggu sampai proses JavaScript menganggur, terlepas dari bagaimana mereka ditambahkan ke antrian.

Seperti yang ditunjukkan pada gambar, meskipun kode timer ditambahkan pada 255ms, itu tidak dapat dieksekusi saat ini karena event handler OnClick masih berjalan. Kode pengatur waktu paling awal dapat dieksekusi adalah pada 300ms, yaitu, setelah event handler onclick selesai

Masalah setInterval

Masalah dengan menggunakan setInterval () adalah bahwa kode timer mungkin belum dieksekusi sebelum kode ditambahkan ke antrian lagi, menghasilkan kode timer yang berjalan beberapa kali berturut -turut tanpa jeda di antara mereka. Solusi untuk masalah ini oleh mesin JavaScript adalah menambahkan kode timer ke antrian saat menggunakan setInterval (). Ini memastikan bahwa interval waktu minimum untuk kode timer yang akan ditambahkan ke antrian adalah interval yang ditentukan

Namun, ini dapat menyebabkan dua masalah: 1. Beberapa interval dilewati; 2. Interval antara eksekusi kode beberapa timer mungkin lebih kecil dari yang diharapkan

Misalkan handler event event tertentu menetapkan timer interval 200 ms menggunakan serinterval (). Jika event handler membutuhkan lebih dari 300ms untuk diselesaikan, dan kode timer juga membutuhkan waktu yang bersamaan, interval tertentu akan dilewati pada saat yang sama.

Pengatur waktu pertama dalam contoh ditambahkan ke antrian pada 205ms, tetapi tidak dapat dieksekusi sampai 300ms telah berlalu. Ketika kode timer ini dieksekusi, salinan lain ditambahkan ke antrian pada 405ms. Pada interval berikutnya, 605ms, kode timer pertama masih berjalan, dan sudah ada contoh kode timer dalam antrian. Akibatnya, kode timer pada saat ini tidak akan ditambahkan ke antrian

ITTICEOUT

Untuk menghindari masalah timer setInterval (), Anda dapat menggunakan panggilan setTimeout () rantai

 setTimeout (function fn () {setTimeout (fn, interval);}, interval);

Rantai pola ini memanggil setTimeout (), dan timer baru dibuat setiap kali fungsi dieksekusi. SetTimeout kedua () memanggil fungsi yang saat ini dieksekusi dan menetapkan timer lain untuk itu. Keuntungan dari ini adalah bahwa kode timer baru tidak dimasukkan ke dalam antrian sampai kode timer sebelumnya dieksekusi, memastikan bahwa tidak ada interval yang hilang. Selain itu, ini memastikan bahwa sebelum kode timer berikutnya dieksekusi, setidaknya interval yang ditentukan harus ditunggu, menghindari operasi berkelanjutan.

Gunakan setInterval ()

 <Div id = "myDiv" style = "tinggi: 100px; lebar: 100px; latar belakang-warna: pink; posisi: absolute; kiri: 0;"> </div> <script> myDiv.onClick = function () {var timer = setInterval (function () {if (parseInt) (myDiv.style.left) {if clear (myDiv.style.left)> 200) {if clear) {parseint (myDiv.style.left)> false;} mydiv.style.left = parseInt (myDiv.style.left) + 5 + 'px'; } </script>

Gunakan setTimeOut rantai ()

 <Div id = "myDiv" style = "tinggi: 100px; lebar: 100px; latar belakang-color: pink; posisi: absolute; kiri: 0;"> </div> <script> myDiv.onClick = function () {setTimeout (function fn () {if (parseInt (myDiv.Style.Left) <= 200) {if (myDiv.Style.Left) <= 200) {if (myDiv.Style.Left) <= 200) {ifeT) {parseInt (myDiv.Style. false;} mydiv.style.left = parseInt (myDiv.style.left) + 5 + 'px'; } </script>

aplikasi

Gunakan timer untuk menyesuaikan urutan peristiwa

[1] Dalam pengembangan web, suatu peristiwa pertama kali terjadi pada elemen anak dan kemudian menggelembung ke elemen induk, yaitu, fungsi callback peristiwa dari elemen anak akan dipicu lebih awal dari fungsi callback peristiwa dari elemen induk. Jika pertama kali membiarkan fungsi panggilan balik acara elemen induk terjadi terlebih dahulu, kita perlu menggunakan setTimeout (f, 0)

Dalam keadaan normal, klik pada elemen Div, pertama -tama pop up 0, lalu pop up 1

 <Div id = "myDiv" style = "height: 100px; lebar: 100px; latar belakang-warna: pink;"> </div> <script> myDiv.onClick = function () {alert (0);} document.onClick = function () {waspada (1);} </skrip>

Jika Anda ingin acara OnClick dari dokumen itu terjadi terlebih dahulu, yaitu, klik pada elemen Div, 1 akan muncul terlebih dahulu, dan kemudian 0 akan muncul. Kemudian buat pengaturan berikut

 <Div id = "myDiv" style = "Height: 100px; width: 100px; latar belakang-kolor: pink;"> </div> <script> myDiv.onClick = function () {setTimeout (function () {waspada (0);})} document.onclick = function () {waspada (1);} <//script>

【2】 Fungsi panggilan balik yang ditentukan pengguna, biasanya dipicu sebelum tindakan default browser. Misalnya, jika pengguna memasukkan teks di kotak input, acara Keypress akan dipicu sebelum browser menerima teks. Oleh karena itu, fungsi panggilan balik berikut tidak dapat mencapai tujuannya

 <input type = "text" id = "myInput"> <script> myInput.onkeypress = function (event) {this.value = this.value.touppercase ();} </script>

Kode di atas ingin mengonversi karakter menjadi kapitalisasi segera setelah pengguna memasukkan teks. Tetapi pada kenyataannya, itu hanya dapat mengonversi karakter sebelumnya menjadi kapitalisasi, karena browser belum menerima teks saat ini, jadi ini. Nilai tidak bisa mendapatkan karakter input terbaru.

Hanya dengan menulis ulang dengan setTimeout dapat berfungsi di atas

 <input type = "text" id = "myInput"> <script> myInput.onkeypress = function (event) {setTimeOut (function () {myInput.value = myInput.value.touppercase ();});} </script>

Kode berakhir di sini. Artikel berikutnya akan memperkenalkannya kepada Anda

Seri BOM: RequestanimationFrame

Aplikasi timer ketiga dari seri BOM (jam, Countdown, Stopwatch, dan jam alarm)

Di atas adalah pengaturan timer pertama dan setInterval dari seri BOM yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!