Sejauh yang saya tahu, kedua javascript ini berperilaku dengan cara yang sama:
Opsi A:
function myTimeoutFunction()
{
doStuff();
setTimeout(myTimeoutFunction, 1000);
}
myTimeoutFunction();
Opsi B:
function myTimeoutFunction()
{
doStuff();
}
myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);
Apakah ada perbedaan antara menggunakan setTimeout dan setInterval ?
javascript
setinterval
Damovisa
sumber
sumber
Jawaban:
Mereka pada dasarnya mencoba melakukan hal yang sama, tetapi
setInterval
pendekatan akan lebih akurat daripadasetTimeout
pendekatan, karenasetTimeout
menunggu 1000 ms, menjalankan fungsi dan kemudian menetapkan batas waktu lain. Jadi periode menunggu sebenarnya sedikit lebih dari 1000 ms (atau lebih banyak jika fungsi Anda membutuhkan waktu lama untuk dieksekusi).Meskipun orang mungkin berpikir bahwa
setInterval
akan menjalankan tepat setiap 1000 ms, penting untuk dicatat itusetInterval
juga akan menunda, karena JavaScript bukan bahasa multi-utas, yang berarti bahwa - jika ada bagian lain dari skrip yang berjalan - interval akan memiliki untuk menunggu sampai selesai.Dalam Fiddle ini , Anda dapat dengan jelas melihat bahwa batas waktu akan jatuh di belakang, sementara interval hampir sepanjang waktu di hampir 1 panggilan / detik (yang sedang dilakukan skrip). Jika Anda mengubah variabel kecepatan di atas menjadi sesuatu yang kecil seperti 20 (artinya akan mencoba berjalan 50 kali per detik), intervalnya tidak akan pernah mencapai rata-rata 50 iterasi per detik.
Penundaan hampir selalu dapat diabaikan, tetapi jika Anda memprogram sesuatu yang sangat tepat, Anda harus menggunakan pengatur waktu yang dapat menyesuaikan sendiri (yang pada dasarnya adalah pengatur waktu berbasis waktu yang secara konstan menyesuaikan diri untuk penundaan yang dibuatnya)
sumber
Iya. Timeout mengeksekusi sejumlah waktu tertentu setelah setTimeout () dipanggil; Interval mengeksekusi sejumlah waktu tertentu setelah interval sebelumnya dipecat.
Anda akan melihat perbedaannya jika fungsi doStuff () Anda membutuhkan waktu untuk dijalankan. Misalnya, jika kami mewakili panggilan ke setTimeout / setInterval with
.
, penembakan timeout / interval dengan*
dan eksekusi kode JavaScript dengan[-----]
, garis waktu terlihat seperti:Komplikasi berikutnya adalah jika interval menyala sementara JavaScript sudah sibuk melakukan sesuatu (seperti menangani interval sebelumnya). Dalam hal ini, interval diingat, dan terjadi segera setelah penangan sebelumnya selesai dan mengembalikan kontrol ke browser. Jadi misalnya untuk proses doStuff () yang terkadang pendek ([-]) dan kadang-kadang panjang ([-----]):
• merepresentasikan interval firing yang tidak bisa langsung mengeksekusi kodenya, dan malah ditunda.
Jadi interval mencoba untuk 'mengejar ketinggalan' untuk kembali sesuai jadwal. Tapi, mereka tidak mengantri satu di atas satu sama lain: hanya akan ada satu eksekusi tertunda per interval. (Jika mereka semua antri, browser akan dibiarkan dengan daftar eksekusi yang terus berkembang!)
x mewakili penembakan interval yang tidak bisa mengeksekusi atau dibuat tertunda, jadi malah dibuang.
Jika fungsi doStuff () Anda biasanya membutuhkan waktu lebih lama untuk dieksekusi daripada interval yang ditetapkan untuk itu, browser akan memakan 100% CPU yang mencoba untuk melayaninya, dan mungkin menjadi kurang responsif.
Chained-Timeout memberikan slot waktu luang yang dijamin ke browser; Interval mencoba memastikan fungsi yang dijalankannya dijalankan sedekat mungkin dengan waktu yang dijadwalkan, dengan mengorbankan ketersediaan browser UI.
Saya akan mempertimbangkan interval untuk animasi satu kali. Saya ingin menjadi semulus mungkin, sementara waktu yang dirantai lebih sopan untuk animasi yang sedang berlangsung yang akan berlangsung sepanjang waktu saat halaman dimuat. Untuk penggunaan yang kurang menuntut (seperti updater sepele menembak setiap 30 detik atau sesuatu), Anda dapat menggunakan keduanya dengan aman.
Dalam hal kompatibilitas browser, setTimeout mendahului setInterval, tetapi semua browser yang Anda temui hari ini mendukung keduanya. Penyerang terakhir selama bertahun-tahun adalah IE Mobile di WinMo <6.5, tetapi mudah-mudahan itu juga sekarang di belakang kita.
sumber
setInterval ()
setInterval()
adalah metode eksekusi kode berbasis interval waktu yang memiliki kemampuan asli untuk berulang kali menjalankan skrip yang ditentukan ketika interval tercapai. Seharusnya tidak disarangkan ke fungsi callback oleh penulis skrip untuk membuatnya loop, karena loop secara default . Itu akan terus menembak pada interval kecuali jika Anda memanggilclearInterval()
.Jika Anda ingin mengulang kode untuk animasi atau centang jam, kemudian gunakan
setInterval()
.setTimeout ()
setTimeout()
adalah metode eksekusi kode berbasis waktu yang akan mengeksekusi skrip hanya satu kali ketika interval tercapai. Itu tidak akan diulang lagi kecuali Anda mengarahkannya ke loop script dengan bersarangsetTimeout()
objek di dalam fungsi yang dipanggil untuk dijalankan. Jika diarahkan untuk loop, itu akan terus menembak pada interval kecuali Anda meneleponclearTimeout()
.Jika Anda ingin sesuatu terjadi satu kali setelah jangka waktu tertentu, maka gunakan
setTimeout()
. Itu karena hanya dijalankan satu kali ketika interval yang ditentukan tercapai.sumber
setTimeout()
,setTimeout()
disebut secara rekursif , sedangkansetInterval()
tidak.SetInterval memudahkan untuk membatalkan eksekusi kode Anda di masa mendatang. Jika Anda menggunakan setTimeout, Anda harus melacak id timer jika Anda ingin membatalkannya nanti.
melawan
sumber
setTimeout
daripada menyimpan id menambahkanif
pernyataan untuk hanya mengatur batas waktu berikutnya ketika beberapa kondisi benar.doStuff
karena id tidak valid. Namun, itu tidak benar-benar perlu untuk menyimpan id batas waktu. Sebaliknya, Anda bisa berhenti meneleponsetTimeout
.Saya menemukan
setTimeout
metode ini lebih mudah digunakan jika Anda ingin membatalkan batas waktu:Juga, jika ada sesuatu yang salah dalam fungsi itu hanya akan berhenti mengulangi pada kesalahan pertama kali, alih-alih mengulangi kesalahan setiap detik.
sumber
Perbedaannya adalah dalam tujuan mereka.
Sesederhana itu
Rincian lebih lanjut di sini http://javascript.info/tutorial/settimeout-setinterval
sumber
setTimeout()
,setTimeout()
disebut secara rekursif , sedangkansetInterval()
tidak.Ketika Anda menjalankan beberapa fungsi di dalam setInterval, yang berfungsi lebih banyak daripada waktu habis-> browser akan macet.
- Misalnya, doStuff () membutuhkan 1500 detik. untuk dieksekusi dan Anda lakukan: setInterval (doStuff, 1000);
1) Browser menjalankan doStuff () yang membutuhkan waktu 1,5 detik. Akan dieksekusi;
2) Setelah ~ 1 detik ia mencoba menjalankan doStuff () lagi. Tapi doStuff sebelumnya () masih dijalankan -> jadi browser menambahkan run ini ke antrian (untuk dijalankan setelah yang pertama dilakukan).
3,4, ..) Penambahan yang sama ke antrian eksekusi untuk iterasi berikutnya, tetapi doStuff () dari sebelumnya masih dalam proses ...
Akibatnya, browser macet.
Untuk mencegah perilaku ini, cara terbaik adalah menjalankan setTimeout di dalam setTimeout untuk meniru setInterval .
Untuk memperbaiki batas waktu antara panggilan setTimeout, Anda dapat menggunakan alternatif koreksi sendiri untuk teknik setInterval JavaScript .
sumber
Saya menggunakan setTimeout.
Rupanya bedanya setTimeout memanggil metode sekali, setInterval memanggilnya berulang kali.
Berikut adalah artikel bagus yang menjelaskan perbedaannya: Tutorial: Pengatur waktu JavaScript dengan setTimeout dan setInterval
sumber
Kode Anda akan memiliki inteval eksekusi yang berbeda, dan dalam beberapa proyek, seperti game online, itu tidak dapat diterima. Pertama, apa yang harus Anda lakukan, untuk membuat kode Anda bekerja dengan inteval yang sama, Anda harus mengubah "myTimeoutFunction" menjadi ini:
Setelah perubahan ini, itu akan sama dengan
Tetapi, Anda masih akan memiliki hasil yang tidak stabil, karena JS adalah single-threaded. Untuk saat ini, jika utas JS akan sibuk dengan sesuatu, itu tidak akan dapat menjalankan fungsi panggilan balik Anda, dan eksekusi akan ditunda selama 2-3 msec. Apakah Anda memiliki 60 eksekusi per detik, dan setiap kali Anda memiliki penundaan acak 1-3 detik, itu sama sekali tidak dapat diterima (setelah satu menit akan ada sekitar 7200 msec penundaan), dan saya dapat saran untuk menggunakan sesuatu seperti ini:
Kode ini akan menjamin periode eksekusi yang stabil. Bahkan utas akan sibuk, dan kode Anda akan dieksekusi setelah 1005 mseconds, lain kali akan ada waktu habis untuk 995 msec, dan hasilnya akan stabil.
sumber
Saya sudah membuat tes sederhana
setInterval(func, milisec)
, karena saya ingin tahu apa yang terjadi ketika konsumsi waktu fungsi lebih besar daripada durasi interval.setInterval
umumnya akan menjadwalkan iterasi berikutnya tepat setelah dimulainya iterasi sebelumnya, kecuali fungsi masih berlangsung . Jika demikian,setInterval
akan menunggu, hingga fungsi berakhir. Segera setelah itu terjadi, fungsi segera dipecat lagi - tidak ada menunggu untuk iterasi berikutnya sesuai jadwal (karena akan berada dalam kondisi tanpa waktu melebihi fungsi). Juga tidak ada situasi dengan iterasi paralel yang berjalan.Saya sudah menguji ini di Chrome v23. Saya harap ini adalah implementasi deterministik di semua browser modern.
Output konsol:
The
wait
Fungsi ini hanya memblokir pembantu benang - sinkron panggilan ajax yang mengambil persis 2500 milidetik pengolahan di sisi server:sumber
setTimout
Panggilan rekursif lebih disukai.Untuk melihatnya sedikit berbeda: setInterval memastikan bahwa kode dijalankan pada setiap interval yang diberikan (yaitu 1000 ms, atau berapa banyak yang Anda tentukan) sementara setTimeout menetapkan waktu yang 'ditunggu hingga' ia menjalankan kode. Dan karena dibutuhkan milidetik tambahan untuk menjalankan kode, ia menambahkan hingga 1000 ms dan karenanya, setTimeout berjalan lagi pada waktu yang tidak tepat (lebih dari 1000 ms).
Misalnya, penghitung waktu / hitung mundur tidak dilakukan dengan setTimeout, ini dilakukan dengan setInterval, untuk memastikan itu tidak menunda dan kode berjalan pada interval yang diberikan dengan tepat.
sumber
Baik setInterval dan setTimeout mengembalikan id timer yang dapat Anda gunakan untuk membatalkan eksekusi, yaitu, sebelum timeout dipicu. Untuk membatalkan Anda memanggil clearInterval atau clearTimeout seperti ini:
Juga, batas waktu secara otomatis dibatalkan ketika Anda meninggalkan halaman atau menutup jendela browser.
sumber
Anda dapat memvalidasi jawaban bobince sendiri ketika Anda menjalankan javascript berikut atau periksa JSFiddle ini
sumber
Yah, setTimeout lebih baik dalam satu situasi, seperti yang baru saja saya pelajari. Saya selalu menggunakan setInterval, yang tersisa untuk dijalankan di latar belakang selama lebih dari setengah jam. Ketika saya beralih kembali ke tab itu, tayangan slide (di mana kode digunakan) berubah sangat cepat, bukannya setiap 5 detik yang seharusnya. Sebenarnya hal itu terjadi lagi ketika saya mengujinya lebih lanjut dan apakah itu kesalahan browser atau tidak tidak penting, karena dengan setTimeout situasi itu sama sekali tidak mungkin.
sumber
Perbedaannya jelas di konsol:
sumber
Hanya menambahkan apa yang telah dikatakan tetapi versi kode setTimeout juga akan mencapai
Maximum call stack size
yang akan menghentikannya dari berfungsi. Karena tidak ada kasing dasar untuk menghentikan fungsi rekursif sehingga Anda tidak bisa menjalankannya selamanya.sumber
setTimeout () hanya akan menjalankan ekspresi SEKALI dan setelah durasi yang ditentukan.
Namun,
setInterval () akan menjalankan ekspresi dalam INFINITE-LOOP setelah setiap durasi yang ditentukan.
sumber
Saya pikir
SetInterval
danSetTimeout
berbeda.SetInterval
mengeksekusi blok sesuai dengan waktu yang ditetapkan sementara,SetTimeout
mengeksekusi blok kode sekali.Cobalah serangkaian kode ini setelah hitungan mundur batas waktu detik:
lalu coba
Anda dapat melihat perbedaannya sendiri.
sumber