Bisakah kita menggunakan menunggu di untuk loop javascript?

Diberikan di bawah ini adalah cuplikan kode JavaScript yang pada dasarnya menjelaskan cara menunda loop dalam JavaScript menggunakan async/menunggu. Pada artikel ini, kami menggunakan JavaScript baik web browser atau Node.js. js. Kita semua menghadapi situasi yang sulit dalam menunda loop di JavaScript tidak seperti C++ di mana kita memiliki fungsi sleep(), tetapi tidak ada yang seperti ini di JavaScript. Semua yang kita miliki di JavaScript adalah fungsi setTimeout() , tetapi ini bukan yang kita cari ketika kita memiliki banyak kode untuk dieksekusi setelah beberapa penundaan, akibatnya, muncul konflik dalam eksekusi linear kode di JavaScript. Di sini kami menemukan cara asinkron yang tepat untuk menjeda loop untuk waktu tertentu seperti yang biasa kami lakukan di C++ atau C

Apa itu async dan menunggu?

Async dan menunggu membuat janji lebih mudah untuk ditulis. Kata kunci async membuat fungsi mengembalikan janji. kata kunci async terutama digunakan saat mendeklarasikan suatu fungsi

Sintaksis

async function delay() {
    return new Promise(resolve => {resolve()})
}

JavaScript menunggu membuat fungsi menunggu Janji. menunggu terutama digunakan saat memanggil suatu fungsi

Sintaksis

await delay();

Mendekati. Janji sebenarnya adalah menjebak eksekusi program di dalamnya sampai tidak terselesaikan, dan ketika diselesaikan setelah beberapa periode waktu, ia memberikan kontrol kembali ke metode utama dari mana ia dipanggil

Di sini, fungsi waitforme adalah fungsi aktual yang membantu kita menunda kode yang menerima satu argumen sebagai milidetik, yang memungkinkan pengguna menunda kode selama durasi pilihannya.

Untuk memahami Janji secara mendalam, Anda harus mengunjungi. https. // www. geeksforgeeks. org/janji-javascript

Anda dapat langsung menyalin dan menempelkan kode di bawah ini ke konsol dan memeriksanya atau Anda dapat membuat file JavaScript terpisah dan memuatnya di chrome atau mencobanya di Node. js

Contoh. Contoh ini menunjukkan penggunaan pendekatan yang dijelaskan di atas

Javascript

function waitforme(millisec) {

    return new Promise(resolve => {

________24__1_______0

await delay();

await delay();

await delay();

await delay();

await delay();

await delay();

await delay();

0
1
2
3
4
5
6
7
8
9
Loop execution finished!)

0
1
2
3
4
5
6
7
8
9
Loop execution finished!)

________24__10_______4

________24__10_______6

await delay();

    function0function1function2

await delay();

await delay();

function_5

Keluaran

0
1
2
3
4
5
6
7
8
9
Loop execution finished!)

Catatan. Kita dapat mengubah nilai parameter fungsi waitforme sambil memanggil fungsi untuk menambah/mengurangi penundaan kode

Saya menemukan keluhan tentang bagaimana loop forEach tidak konsisten saat Anda meneruskan fungsi lambda asinkron sebagai argumen callback yang akan dijalankan untuk setiap elemen. Di permukaan, ini tidak tampak seperti ekspektasi yang tidak realistis, tetapi dalam artikel ini, saya akan mencoba menjelaskan mengapa ini tidak berhasil, menunjukkan kepada Anda cara populer yang diterapkan oleh developer, dan terakhir pengoptimalan yang berfungsi untuk skenario tertentu (

Jika Anda sudah menguasai async/menunggu, Anda dapat melewati bagian ini. Hal lain yang saya perhatikan adalah, seperti saya kebanyakan orang tidak mengerti dan karena itu, mereka tidak mengerti apa yang sebenarnya dilakukan oleh sintaks async-await. Sintaks async-await hanyalah gula sintaksis di atas API janji, tag async pada suatu fungsi hanya memberi tahu javascript bahwa fungsi ini akan mengembalikan janji dan menunggu di dalam fungsi memberi tahu juru bahasa untuk tetap berada di baris kode ini di dalam . Itu membuat yang jelek bersarang. panggilan kemudian () terlihat lebih mudah dibaca

forEach loop tidak dibangun untuk bekerja dengan fungsi panggilan balik asinkron yang merupakan alasan mengapa ia tidak melakukan apa yang Anda harapkan. Itu tidak menunggu janji iterasi diselesaikan sebelum melanjutkan ke iterasi berikutnya. Ini berarti bahwa pada akhir iterasi forEach loop tidak ada yang benar-benar didorong ke dalam array pengguna (didorong sedikit kemudian tetapi saya tidak benar-benar ingin masuk ke loop acara di sini)

Mencermati masalah Anda akan melihat bahwa alasan utama kode kami tidak berfungsi dengan benar adalah karena kami mencoba menggunakan loop forEach untuk sesuatu yang tidak dibuat untuk itu. Kami membutuhkan sesuatu yang memungkinkan kami mengulangi array dan memungkinkan kami untuk memblokir eksekusi program sampai janji kami diselesaikan dan di situlah basis untuk loop masuk

Kita bisa menggunakan for… dari perulangan atau for(let i = 0;…. ) jenis for loop tetapi saya akan menggunakan for…of here karena kita tidak memerlukan banyak kontrol atas proses iterasi

Nore. for… dari loop harus berada di dalam fungsi async untuk menggunakan await di dalam loop. Sintaks ini tidak dapat digunakan di tingkat atas program Anda kecuali Anda telah menetapkan beberapa konfigurasi tambahan pada lingkungan yang sedang berjalan

Ini akan berfungsi persis seperti yang Anda harapkan dan pengguna yang diselesaikan akan dicatat

Melihat solusi kami dari bagian sebelumnya, Anda dapat melihat beberapa masalah yang dapat muncul. Bayangkan butuh 5 detik untuk mendapatkan pengguna pada panggilan getUser, itu berarti butuh 25 detik untuk mencatat semua pengguna dan ini bahkan lebih buruk ketika Anda melihat masalah ini pada skala yang lebih besar

Untuk skenario khusus ini untuk mendapatkan pengguna dari larik id pengguna, Anda mungkin memperhatikan bahwa kami menunggu satu pengguna dikembalikan sebelum kami mulai mengambil pengguna berikutnya, tetapi kami tidak perlu menunggu karena mengambil pengguna berikutnya tidak bergantung pada . Bisakah kita mengambil semuanya secara paralel sehingga butuh 5 detik untuk mendapatkan semuanya? . Di sinilah Janji. all() masuk, kami menggunakannya untuk mengelompokkan resolusi janji

Menggunakan Janji. all(), semua janji sedang diselesaikan secara paralel, akan membutuhkan waktu yang sama untuk menyelesaikan satu janji untuk menyelesaikan semuanya. Satu hal penting yang perlu diperhatikan adalah Anda mendapatkan akses ke semua janji yang diselesaikan hanya jika semua janji diselesaikan, jadi jika salah satu panggilan memerlukan waktu 10 detik sementara panggilan lainnya memerlukan waktu 2 detik, Anda harus menunggu 10 detik.

Saya sebenarnya bukan seorang penulis, jadi saya harap Anda memahami ini dan saya sudah selesai. Juga, jika Anda memiliki cara yang lebih baik untuk melakukan ini, beri tahu saya di komentar, saya juga suka mempelajari hal-hal baru

Bisakah saya menggunakan menunggu di dalam?

Bisakah kita menggunakan async untuk loop?

Kapan saya harus menggunakan menunggu di JavaScript?

Bagaimana cara kerja await event loop?