setInterval vs setTimeout: Mana yang patut anda gunakan?

Jika anda telah menggunakan JavaScript, anda pasti akan menemui setInterval dan setTimeout pada satu ketika. Kedua-dua kaedah ini adalah seperti alat ajaib untuk memberitahu kod anda apabila melakukan sesuatu selepas beberapa ketika atau setiap selang waktu tertentu. Tetapi bilakah anda harus menggunakan satu dan bukan yang lain? ?

Apakah setTimeout dan setInterval?

Sebelum memutuskan yang mana satu untuk digunakan, anda perlu mengingati apa yang dilakukan oleh setiap orang.

Bayangkan setTimeout sebagai penggera yang berbunyi selepas beberapa ketika. Anda memberitahunya berapa lama untuk menunggu dan kemudian, boom, ia menjalankan fungsi. Tetapi dia hanya melakukannya sekali sahaja.

  setTimeout(() => {
      console.log("¡Hola después de 2 segundos!");
  }, 2000);

Di sini, "Hello!" muncul selepas 2 saat dan kemudian tamat, fungsi tidak berulang.

Dalam kes setInterval ia seperti penggera yang terus berdering setiap beberapa minit sehingga anda mematikannya. Anda memberitahunya berapa lama untuk menunggu antara ulangan dan ia terus melaksanakan fungsi sehingga anda menyuruhnya berhenti.

  setInterval(() => {
      console.log("¡Hola cada 2 segundos!");
  }, 2000);

Dalam kes ini, mesej akan muncul setiap 2 saat, tanpa henti, sehingga anda menghentikan selang dengan fungsi clearInterval.

Bilakah anda harus menggunakan setTimeout?

setTimeout ialah kawan baik anda apabila anda mahu sesuatu berlaku sekali sahaja, tetapi tidak serta-merta. Berikut ialah beberapa situasi yang sangat berguna:

• Jeda Pendek: Mungkin anda perlu menunggu beberapa saat sebelum menjalankan animasi, atau mungkin anda ingin memberi masa untuk memuatkan sebelum memaparkannya.

• Proses tak segerak: Kadangkala anda perlu menunggu seketika sebelum meneruskan ke langkah seterusnya dalam operasi yang kompleks.

Jadi, jika anda hanya memerlukan sedikit kelewatan sebelum menjalankan sesuatu sekali, setTimeout ialah pilihan anda.

Dan bagaimana dengan setInterval?

setInterval ialah perkara yang anda mahukan jika anda memerlukan sesuatu berlaku berulang kali, seperti jam yang tidak pernah berhenti berdetik. Berikut ialah beberapa contoh setInterval bersinar:

• Jam dan Pemasa: Bayangkan jam yang mengemas kini masa setiap saat atau pemasa kira detik.

• Semakan berterusan: Semak dari semasa ke semasa sama ada terdapat mesej baharu, kemas kini atau jika sesuatu telah berubah dalam aplikasi anda.

• Kemas kini masa nyata: Muat semula kandungan halaman dengan data baharu setiap beberapa saat.

Jika apa yang anda perlukan adalah untuk sesuatu terus berlaku pada selang masa yang tetap, maka setInterval ialah satu-satunya.

Beberapa perkara tentang prestasi

Adalah penting untuk menyatakan bahawa kedua-dua setTimeout dan setInterval tidak mudah. Jika aplikasi anda sangat sibuk, pemasa mungkin tertunda, terutamanya jika anda menjalankan banyak perkara pada masa yang sama. Dan berhati-hati dengan setInterval, kerana jika apa yang anda lakukan dalam masa yang lebih lama daripada selang yang anda tetapkan, fungsi boleh mula terkumpul, dan ketika itulah masalah bermula.

Untuk mengelakkan perkara ini, sesetengah memilih untuk menggunakan setTimeout secara rekursif dan bukannya setInterval, kerana ini memberi anda lebih kawalan ke atas apabila fungsi seterusnya dilaksanakan:

function ejecutarCada2Segundos() {
    console.log("¡Hola cada 2 segundos!");
    setTimeout(ejecutarCada2Segundos, 2000);
}

ejecutarCada2Segundos();

Tetapi jika anda memutuskan untuk menggunakan setInterval adalah penting untuk mengetahui cara menghentikan selang untuk mengelakkannya daripada terus berjalan selama-lamanya. Di sinilah clearInterval masuk. Kaedah ini membolehkan anda menghentikan selang aktif. Berikut ialah contoh mudah:

const intervalo = setInterval(() => {
    console.log("¡Hola cada 2 segundos!");
}, 2000);

// Detener el intervalo después de 10 segundos
setTimeout(() => {
    clearInterval(intervalo);
    console.log("Intervalo detenido");
}, 10000);

Dalam contoh ini, mesej "Helo setiap 2 saat!" akan berulang selama 10 saat. Selepas masa itu, clearInterval menguruskan menghentikan selang dan mesej "Selang dihentikan" dipaparkan dalam konsol.

Jadi yang mana satu saya gunakan?

Ringkasnya, jika anda memerlukan sesuatu untuk berlaku sekali sahaja selepas beberapa ketika, setTimeout ialah cara yang perlu dilakukan. Tetapi jika anda mahu sesuatu berulang secara berterusan, pilih setInterval.

Kedua-duanya ialah alat yang berkuasa dalam JavaScript dan mengetahui masa untuk menggunakan setiap satu boleh menjadikan kod anda lebih cekap dan lebih mudah untuk diurus.

Atas ialah kandungan terperinci setInterval vs setTimeout: Mana yang patut anda gunakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!