Anda tidak perlu menetapkan tamat masa

Saya tahu pemasa telah lama menjadi ciri yang digunakan oleh ramai orang dalam tugas harian mereka. Dalam dunia JavaScript, pemasa sering dilaksanakan dengan fungsi setTimeout atau setInterval, berita buruk untuk anda jika anda melakukannya ialah ia bukan amalan yang baik dan saya akan cuba menerangkan sebabnya.

Sebelum saya mula menerangkan pemikiran saya, saya ada soalan untuk anda: bolehkah anda menggunakan jam tangan yang memberi masa yang salah?

Jika jawapan anda ya, saya minta maaf kerana telah membuang masa berharga anda kerana artikel ini bukan milik anda.

Sebaliknya, jika jawapan anda negatif, saya akan menerangkan mengapa menggunakan setTimeout atau setInterval adalah seperti menggunakan jam tangan yang rosak untuk mendapatkan masa.

Masalah dengan fungsi ini

Untuk bermula, mari kita pertimbangkan coretan berikut

 function test() {
   let i = 0;
   setTimeout(() => console.log("hello"), 0);
   while (i < 5) {
     console.log("number ", i);
     i += 1;
  }
  console.log("world");

jika anda menjalankan coretan ini dalam konsol penyemak imbas anda, anda akan mendapat hasil berikut

Tingkah laku ini disebabkan oleh fakta bahawa setTimeout menambah panggilan balik dalam baris gilir penyemak imbas supaya ia harus memprosesnya sebaik sahaja ia melahu (tidak mempunyai tugas untuk dilakukan) dengan kata lain panggilan balik dihantar ke setTimeout mempunyai keutamaan yang rendah

Sekarang, mengetahui perkara ini, saya bayangkan bahawa sukar untuk anda melaksanakan pemasa menggunakan fungsi setTimeout kerana anda boleh mempunyai 2 atau 10 tanda (bergantung pada seberapa sibuk penyemak imbas anda) pada masa yang sama. Ini akan menjadi mimpi ngeri untuk nyahpepijat, tetapi adakah kita mempunyai penyelesaian yang lebih baik?

Satu cara untuk mengelakkan fungsi ini

Untuk menyediakan cara yang lebih baik untuk melaksanakan pemasa, kita harus menggunakan fungsi requestAnimationFrame kerana ia memberitahu penyemak imbas untuk melaksanakan panggilan balik sebelum cat seterusnya (dengan kata lain sebelum sebarang perubahan dalam UI berlaku)

Perbezaan di sini agak ketara, jadi lebih baik memahaminya melalui kod. Mari kita ambil semula coretan kami yang terdahulu dan ubah suainya sedikit untuk membandingkan setTimeout dan requestAnimationFrame

function testWithAnimationFrame() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i < 5) {
    console.log("number ", i);
    i += 1;
  }
  console.log("world");
}

Dalam contoh ini, kita dapat melihat bahawa apabila berjalan pada Chrome, setTimeout berjalan sebelum requestAnimationFrame (walaupun dalam beberapa kes yang jarang berlaku songsang berlaku)

Tetapi jika anda menjalankannya pada Firefox, ini akan menjadi output

Ini mungkin kelihatan mengelirukan tetapi jika anda memberi sedikit perhatian, anda akan menyedari bahawa tiada lukisan berlaku semasa pelaksanaan, jadi cara senario ini dikendalikan bergantung pada penyemak imbas.

Sekarang jika kita boleh tweak coretan kita untuk membuat penyemak imbas mengecat semula halaman, mari lihat apa yang akan berlaku

function testWithAnimationFrame2() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i < 5) {
    console.log("number ", i);
    i += 1;
    document.body.style.backgroundColor = "red";
  }
  console.log("world");
}

Berikut ialah output pada Chrome

Dan inilah output dalam Firefox

Seperti yang anda lihat dalam log, apabila penyemak imbas membuat perubahan dalam UI, fungsi requestAnimationFrame akan sentiasa mempunyai keutamaan berbanding panggilan balik berjadual yang lain.

Oleh kerana di web, kami sentiasa melakukan pengecatan semula, requestAnimationFrame ialah pilihan yang jelas untuk melaksanakan pemasa.

Memahami fungsi requestAnimationFrame

Fungsi ini hanya mengambil panggilan balik sebagai parameter. Untuk memberikan konteks kepada panggilan balik, cap masa yang diperlukan untuk menunjukkan masa bingkai sebelumnya telah tamat berdasarkan masa pemaparan awal halaman.

Fungsi ini akan mengembalikan integer yang mewakili pengecam permintaan, ini berguna jika anda ingin membatalkan permintaan dengan fungsi cancelAnimationFrame.

Pelaksanaan mudah jam randik dalam JavaScript

Untuk melaksanakan jam randik, terdapat beberapa keperluan:

• Kita harus tahu selepas tempoh masa yang mana ia harus berdetik (biasanya satu saat)
• Kita harus tahu kelewatan masa selepas itu jam randik harus berhenti berdetik
• Selang waktu berdetik hendaklah kurang daripada kelewatan

Dengan mengambil kira semua keperluan ini, coretan kod berikut akan membuat jam randik untuk anda

Outro

Saya tahu ia mungkin sudah lama dibaca tetapi percaya anda telah menikmatinya. Bagaimanapun, jika anda mempunyai sebarang soalan atau jika anda mempunyai sebarang cadangan, sila hubungi saya.

Terima kasih kerana membacanya dan selamat tinggal ?

Atas ialah kandungan terperinci Anda tidak perlu menetapkan tamat masa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!