Fungsi JavaScript SetTimeout: Panduan dengan contoh

JavaScript's

Penjelasan fungsi: Melaksanakan pelaksanaan tertunda setTimeout

adalah fungsi asli dalam JavaScript yang digunakan untuk memanggil fungsi atau melaksanakan coretan kod selepas kelewatan yang ditentukan (milisaat). Ini berguna dalam banyak senario, seperti memaparkan tetingkap pop timbul selepas pengguna melayari halaman untuk seketika, atau menambah kelewatan ringkas sebelum mengeluarkan kesan hover elemen (mencegah salah operasi). setTimeout

Mata Utama:

Fungsi

JavaScript's
• membolehkan pelaksanaan fungsi atau coretan kod selepas bilangan milisaat tertentu, yang sangat berguna untuk tugas -tugas seperti memaparkan popup selepas masa pelayaran tertentu. setTimeout
• menerima rujukan fungsi sebagai parameter pertama, yang boleh menjadi nama fungsi, pembolehubah yang merujuk fungsi, atau fungsi tanpa nama. Ia juga boleh melaksanakan rentetan kod, tetapi tidak disyorkan kerana ini akan mengurangkan kebolehbacaan, keselamatan dan kelajuan. setTimeout
Anda boleh menggunakan fungsi tanpa nama sebagai parameter pertama untuk lulus parameter ke fungsi panggil balik yang dilaksanakan oleh
• . Walau bagaimanapun, alternatif kepada parameter penyenaraian selepas kelewatan tidak serasi dengan IE9 dan di bawah. setTimeout
Dalam kod yang dilaksanakan oleh
• , nilai setTimeout berjalan dalam konteks pelaksanaan yang berbeza daripada fungsi yang memanggilnya, yang boleh menyebabkan masalah apabila konteks kata kunci this adalah penting. Ini boleh diselesaikan dengan menggunakan fungsi perpustakaan this, atau fungsi anak panah. bind Nilai pulangan
• adalah ID angka yang boleh digunakan untuk membatalkan pemasa bersempena dengan fungsi setTimeout. clearTimeout
Contoh Penggunaan

Blok kod berikut menunjukkan contoh mudah yang mencetak mesej ke konsol selepas tamat masa 2 saat (2000 milisaat): setTimeout

Untuk menunjukkan konsep ini dengan lebih terperinci, demonstrasi berikut memaparkan tetingkap pop timbul selepas mengklik butang dua saat: (Sila lawati Codepen untuk melihat demo)

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

Tatabahasa

Menurut dokumentasi MDN, sintaks

adalah seperti berikut:

setTimeout of:

<code class="language-javascript">const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])</code>

adalah ID digital yang boleh digunakan bersempena dengan

untuk membatalkan pemasa.
• timeoutID clearTimeout merujuk kepada antara muka
atau antara muka
• . scope Window WorkerGlobalScope adalah fungsi yang akan dilaksanakan selepas pemasa tamat.
• functionRef adalah sintaks alternatif yang membolehkan anda memasukkan rentetan dan bukannya fungsi yang disusun dan dilaksanakan apabila pemasa tamat.
• code adalah bilangan milisaat yang panggilan fungsi harus ditangguhkan. Jika ditinggalkan, lalai adalah 0.
• delay, ...,
adalah parameter lain yang diserahkan kepada fungsi yang ditentukan oleh
• . arg1 argN functionRef
NOTA: Kurungan persegi

Tunjukkan parameter pilihan.

[] dan

anda akan melihat bahawa kadang -kadang sintaks mengandungi window.setTimeout. Mengapa ini?

Apabila menjalankan kod dalam penyemak imbas, scope akan merujuk kepada objek Global window. setTimeout dan window.setTimeout merujuk kepada fungsi yang sama, satu -satunya perbezaan ialah dalam pernyataan kedua, kita merujuk kepada kaedah setTimeout sebagai harta objek window.

Pada pendapat saya, ini menambah kerumitan, sementara manfaatnya adalah minimum. Jika anda menentukan kaedah setTimeout yang lain yang akan ditemui terlebih dahulu dan kembali dalam rantaian skop, maka anda mungkin mempunyai masalah yang lebih besar untuk dibimbangkan.

Dalam tutorial ini, saya akan menghilangkan window, tetapi pada akhirnya, terpulang kepada anda yang sintaks yang anda pilih.

Contoh penggunaan kaedah

Kaedah ini menerima rujukan fungsi sebagai parameter pertama. setTimeout

ini boleh menjadi nama fungsi:

setTimeout

pembolehubah yang fungsi rujukan (ekspresi fungsi):

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

atau fungsi tanpa nama:

<code class="language-javascript">const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])</code>

Seperti yang disebutkan di atas, anda juga boleh lulus rentetan kod ke

untuk pelaksanaannya:

<code class="language-javascript">function greet() {
  alert('Howdy!');
}
setTimeout(greet, 2000);</code>

Walau bagaimanapun, ini tidak disyorkan atas sebab -sebab berikut:

setTimeout

sukar dibaca (dan oleh itu sukar untuk mengekalkan dan/atau debug).

<code class="language-javascript">const greet = function() {
  alert('Howdy!');
};
setTimeout(greet, 2000);</code>

Ia menggunakan tersirat

, yang merupakan risiko keselamatan yang berpotensi.

• Ia lebih perlahan daripada alternatif kerana ia perlu memanggil jurubahasa JS.
• eval Parameter lulus ke
Dalam senario asas, kaedah penyemak imbas yang disukai adalah untuk lulus hujah kepada fungsi panggil balik yang dilaksanakan oleh

menggunakan fungsi tanpa nama sebagai parameter pertama.

setTimeout Dalam contoh berikut, kami memilih haiwan rawak dari array

dan lulus haiwan rawak ini sebagai parameter ke fungsi

. Kemudian, setTimeout melaksanakan fungsi

dengan kelewatan satu saat:

animals makeTalk setTimeout NOTA: Saya menggunakan fungsi biasa (makeTalk) untuk mengembalikan elemen rawak dari array. Anda juga boleh menulisnya sebagai ekspresi fungsi menggunakan fungsi anak panah:

<code class="language-javascript">setTimeout(() => { alert('Howdy!'); }, 2000);</code>

kami akan memperkenalkan fungsi anak panah di bahagian seterusnya. Berikut adalah codepen yang mengandungi kod di atas (anda perlu membuka konsol untuk melihat output). getRandom kaedah alternatif

<code class="language-javascript">setTimeout('alert("Howdy!");', 2000);</code>

Dari sintaks di bahagian atas artikel, dapat dilihat bahawa terdapat kaedah kedua untuk lulus parameter ke fungsi panggil balik yang dilaksanakan oleh

. Ini melibatkan penyenaraian mana -mana parameter selepas kelewatan.

Rujuk kepada contoh sebelumnya, ini akan memberi kita:

setTimeout Malangnya, ini tidak berfungsi di IE9 atau di bawah, di mana parameter diluluskan sebagai

. Jika malangnya anda memerlukan sokongan untuk IE9, polyfill disediakan pada MDN.

<code class="language-javascript">function makeTalk(animal) {
  const noises = {
    cat: 'purr',
    dog: 'woof',
    cow: 'moo',
    pig: 'oink',
  }

  console.log(`A ${animal} goes ${noises[animal]}.`);
}

function getRandom(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

const animals = ['cat', 'dog', 'cow', 'pig'];
const randomAnimal = getRandom(animals);

setTimeout(() => {
  makeTalk(randomAnimal);
}, 1000);</code>

Soalan Kata Kata Kunci

setTimeout Kod yang dilaksanakan berjalan dalam konteks pelaksanaan yang berbeza daripada fungsi yang memanggilnya. Ini menjadi masalah apabila konteks kata kunci this adalah penting:

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

Sebab output ini ialah dalam contoh pertama,

menunjuk ke objek this, dan dalam contoh kedua, dog menunjuk kepada objek this global (ia tidak mempunyai atribut window ). sound

Untuk menyelesaikan masalah ini, terdapat pelbagai cara ...

Penetapan penjelasan nilai

this

anda boleh menggunakan kaedah

untuk membuat fungsi baru, dan apabila dipanggil, kata kunci bind akan ditetapkan ke nilai yang disediakan (dalam hal ini objek bind). Ini akan memberi kita: this dog Perpustakaan Pengguna

<code class="language-javascript">const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])</code>

Banyak perpustakaan datang dengan fungsi terbina dalam untuk menyelesaikan masalah ini. Sebagai contoh, kaedah

jQuery. Ia menerima fungsi dan mengembalikan fungsi baru yang akan sentiasa mempunyai konteks tertentu. Dalam kes ini, itu akan menjadi:

jQuery.proxy() Gunakan fungsi anak panah dalam

<code class="language-javascript">function greet() {
  alert('Howdy!');
}
setTimeout(greet, 2000);</code>

Fungsi anak panah diperkenalkan dalam ES6. Mereka jauh lebih pendek daripada sintaks fungsi biasa:

setTimeout

Sudah tentu, anda boleh menggunakannya dengan

, tetapi satu perkara yang perlu diperhatikan - fungsi anak panah tidak mempunyai nilai

sendiri. Sebaliknya, mereka menggunakan nilai

<code class="language-javascript">const greet = function() {
  alert('Howdy!');
};
setTimeout(greet, 2000);</code>

konteks leksikal yang tertutup.

setTimeout Gunakan fungsi biasa: this this

Gunakan fungsi anak panah:

<code class="language-javascript">setTimeout(() => { alert('Howdy!'); }, 2000);</code>

Dalam contoh kedua,

menunjuk kepada objek

global (sekali lagi, ia tidak mempunyai harta ).

<code class="language-javascript">setTimeout('alert("Howdy!");', 2000);</code>

Ini boleh membawa kita ke dalam masalah apabila menggunakan fungsi anak panah dengan this. Kami telah melihat sebelum ini untuk memberikan nilai window yang betul untuk fungsi yang dipanggil dalam sound:

setTimeout Ini tidak akan berfungsi apabila menggunakan fungsi anak panah dalam kaedah yang diperkenalkan, kerana fungsi anak panah tidak mempunyai nilai setTimeout sendiri. Kaedah ini masih akan merakam this.

<code class="language-javascript">function makeTalk(animal) {
  const noises = {
    cat: 'purr',
    dog: 'woof',
    cow: 'moo',
    pig: 'oink',
  }

  console.log(`A ${animal} goes ${noises[animal]}.`);
}

function getRandom(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

const animals = ['cat', 'dog', 'cow', 'pig'];
const randomAnimal = getRandom(animals);

setTimeout(() => {
  makeTalk(randomAnimal);
}, 1000);</code>

Menulis kod bersih menggunakan fungsi anak panah dan

Walau bagaimanapun, kerana fungsi anak panah tidak mempunyai nilai this sendiri, ia juga boleh memberi kita kelebihan. undefined

Pertimbangkan kod seperti ini:

setTimeout

Ia boleh ditulis semula dengan lebih ringkas menggunakan fungsi anak panah:

this

Jika anda ingin mengetahui permulaan fungsi anak panah, baca "Fungsi Arrow ES6: Sintaks Ringkas dalam JavaScript".

Batalkan pemasa

<code class="language-javascript">const getRandom = arr => arr[Math.floor(Math.random() * arr.length)];</code>

Seperti yang kita pelajari pada permulaan artikel, nilai pulangan

adalah ID angka yang boleh digunakan bersamaan dengan fungsi

<code class="language-javascript">setTimeout(makeTalk, 1000, randomAnimal);</code>

untuk membatalkan pemasa:

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

mari kita lihat bagaimana ia berfungsi. Dalam pen di bawah, jika anda mengklik butang Countdown Mula, undur akan bermula. Sekiranya undur selesai, anak kucing menang. Walau bagaimanapun, jika anda menekan butang "Hentikan Countdown", pemasa akan dihentikan dan ditetapkan semula. (Jika anda tidak melihat kesan sejuk apabila undur mencapai sifar, penun pena menggunakan butang yang tertanam di sebelah kanan bawah.)

Ringkasan

Dalam artikel ini, saya menunjukkan cara menggunakan setTimeout untuk melambatkan pelaksanaan fungsi. Saya juga menunjukkan cara lulus parameter ke setTimeout, bagaimana untuk mengekalkan nilai this di dalam fungsi panggil baliknya, dan bagaimana membatalkan pemasa.

setTimeout FAQS untuk fungsi JavaScript

• Apa yang ada di JavaScript? setTimeout

  adalah fungsi terbina dalam dalam JavaScript yang membolehkan anda menjadualkan pelaksanaan fungsi atau segmen kod selepas kelewatan tertentu (dalam milisaat). setTimeout

• Bagaimana ia berfungsi? setTimeout Apabila anda memanggil fungsi

  , anda perlu menyediakan dua parameter: fungsi atau kod untuk dilaksanakan, dan kelewatan dalam milisaat. Fungsi/kod yang disediakan akan ditambah ke barisan dan selepas kelewatan yang ditentukan, ia akan dipindahkan dari barisan ke timbunan panggilan untuk pelaksanaan.

  setTimeout

• Apakah alternatif yang digunakan

  ? setTimeout Ya, terdapat alternatif, seperti

  , yang akan mengulangi fungsi pada selang waktu yang ditentukan, dan yang lebih baru

  , yang merupakan animasi yang lebih lancar dan prestasi penyemak imbas yang lebih baik. setInterval requestAnimationFrame

• Bilakah tidak boleh digunakan

  ? setTimeout

  adalah alat yang berguna untuk penjadualan pelaksanaan kod asynchronous dalam JavaScript, tetapi dalam beberapa kes ia mungkin bukan pilihan terbaik. Untuk animasi atau permainan yang tepat, anda harus menggunakan

  . Anda tidak boleh bersarang pelbagai setTimeout panggilan; requestAnimationFrame tidak tepat untuk kelewatan kurang daripada 10 milisaat; Jika anda membina aplikasi masa nyata (seperti permainan multiplayer dalam talian atau platform perdagangan kewangan), pilih teknologi masa nyata seperti WebSockets. Tugas-tugas yang berintensifkan CPU boleh menghalang gelung acara; setTimeout setTimeout

• Bolehkah saya membatalkan operasi

  ? setTimeout Ya, anda boleh menggunakan fungsi

  untuk membatalkan masa tamat yang dijadualkan. Ia mengambil masa tamat masa yang dikembalikan oleh

  sebagai parameter. Contohnya: clearTimeout setTimeout const timeoutId = setTimeout(myFunction, 1000); clearTimeout(timeoutId);

  Apakah perbezaan antara

• dan ? setTimeout setInterval

  setTimeout Jadualkan fungsi untuk dijalankan sekali selepas kelewatan yang ditentukan, manakala setInterval menjadualkan fungsi untuk berjalan berulang kali pada selang yang ditentukan sehingga dibatalkan atau program berhenti.

• Apakah nilai kelewatan minimum yang boleh saya gunakan setTimeout?

  Nilai kelewatan minimum adalah 0, yang bermaksud bahawa fungsi itu dijadualkan dilaksanakan sebelum thread semasa selesai tetapi mengendalikan sebarang peristiwa yang belum selesai. Walau bagaimanapun, granulariti sebenar pemasa berbeza dari penyemak imbas ke penyemak imbas dan persekitaran kepada pelayar yang berbeza. Sesetengah persekitaran mungkin tidak menyokong kelewatan kurang daripada 10 milisaat.

• Apa yang ada di node.js? setTimeout

  adalah fungsi terbina dalam untuk node.js yang menangguhkan pelaksanaan fungsi atau blok kod yang diberikan oleh bilangan milisaat tertentu. setTimeout

• bagaimana menggunakan dalam node.js? setTimeout

  anda boleh menggunakan fungsi

  seperti berikut: setTimeout di mana setTimeout(callback, delay); adalah fungsi yang anda ingin laksanakan selepas kelewatan milisaat yang ditentukan. callback

• Apakah amalan terbaik untuk menggunakan dalam node.js? setTimeout

  Beberapa amalan terbaik termasuk menggunakan fungsi yang dinamakan sebagai panggilan balik, mengendalikan kesilapan dengan anggun, dan memahami tingkah laku gelung peristiwa untuk mengelakkan kelewatan atau penyumbatan yang tidak dijangka. Juga, pertimbangkan untuk menggunakan

  untuk melaksanakan dengan segera semasa kitaran gelung acara seterusnya. setImmediate

(Perhatikan bahawa kerana teks input mengandungi pautan ke Codepen, saya tidak dapat memberikan kandungan codepen secara langsung dalam output. Anda perlu melawat pautan yang disediakan dalam artikel untuk melihat demo Codepen.)

Atas ialah kandungan terperinci Fungsi JavaScript SetTimeout: Panduan dengan contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!