Cara menggunakan ITERRATION pada JavaScript

Saya sedang mengerjakan situs web, tempat saya perlu membuat jeda atau menunda.
Jadi tolong beri tahu saya Cara membuat jeda atau menunda for loop di javascript atau jQuery

Ini adalah contoh uji

 var s = document.getElementById("div1");
 for (i = 0; i < 10; i++) {
     s.innerHTML = s.innerHTML + i.toString();
     //create a pause of 2 seconds.
  }

Saya sudah mencoba semuanya, tapi saya pikir kode ini lebih baik, ini kode yang sangat sederhana.

var s = document.getElementById("div1");
var i = 0;
setInterval(function () {s.innerHTML = s.innerHTML + i.toString();  i++;}, 2000);

Anda tidak dapat menggunakan penundaan dalam fungsi, karena perubahan yang Anda lakukan ke elemen tidak akan muncul sampai Anda keluar dari fungsi.

Gunakan setTimeout untuk menjalankan potongan kode di lain waktu:

var s = document.getElementById("div1");
for (i = 0; i < 10; i++) {

  // create a closure to preserve the value of "i"
  (function(i){

    window.setTimeout(function(){
      s.innerHTML = s.innerHTML + i.toString();
    }, i * 2000);

  }(i));

}

var wonderfulFunction = function(i) {
   var s = document.getElementById("div1"); //you could pass this element as a parameter as well
   i = i || 0;
   if(i < 10) {
      s.innerHTML = s.innerHTML + i.toString();

      i++;
      //create a pause of 2 seconds.
      setTimeout(function() { wonderfulFunction(i) }, 2000);          
   }
}

//first call
wonderfulFunction(); //or wonderfulFunction(0);

Anda tidak dapat menjeda kode javascript, seluruh bahasa dibuat untuk bekerja dengan acara, solusi yang saya berikan memungkinkan Anda menjalankan fungsi dengan penundaan, tetapi eksekusi tidak pernah berhenti. 

jika Anda ingin membuat jeda atau menunda loop FOR, satu-satunya metode nyata adalah

while (true) {
    if( new Date()-startTime >= 2000) {
        break;
    }
}

startTime adalah waktu sebelum Anda menjalankan sementara tetapi metode ini akan menyebabkan browser menjadi sangat lambat 

Tidak mungkin untuk langsung menjeda fungsi Javascript dalam loop for kemudian melanjutkan pada titik itu.

Kode berikut adalah contoh pseudo-multithreading yang dapat Anda lakukan di JS, kira-kira contoh bagaimana Anda dapat menunda setiap iterasi dari sebuah loop:

var counter = 0;

// A single iteration of your loop
// log the current value of counter as an example
// then wait before doing the next iteration
function printCounter() {
    console.log(counter);
    counter++;
    if (counter < 10)
        setTimeout(printCounter, 1000);
}

// Start the loop    
printCounter();

Saya menjalankan fungsi di mana saya memerlukan akses ke properti objek di luar. Jadi, penutupan di Guffa solusi tidak bekerja untuk saya. Saya menemukan variasi nicosantangelo solusi dengan hanya membungkus setTimeout dalam pernyataan if sehingga tidak berjalan selamanya.

    var i = 0;
    function test(){

        rootObj.arrayOfObj[i].someFunction();
        i++;
        if( i < rootObj.arrayOfObj.length ){
            setTimeout(test, 50 ); //50ms delay
        }

    }
    test();

Sementara beberapa jawaban lain akan berfungsi, saya menemukan kodenya kurang elegan. Perpustakaan Frame.js dirancang untuk menyelesaikan masalah ini dengan tepat. Menggunakan Frame Anda bisa melakukannya seperti ini:

var s = document.getElementById("div1");
for (i = 0; i < 10; i++) {
   Frame(2000, function(callback){ // each iteration would pause by 2 secs
      s.innerHTML = s.innerHTML + i.toString();
      callback();
   }); 
}
Frame.start();

Dalam hal ini, hampir sama dengan contoh yang menggunakan setTimeout, tetapi Frame menawarkan banyak keuntungan, terutama jika Anda mencoba untuk melakukan beberapa timeout bersarang atau bersarang, atau memiliki aplikasi JS yang lebih besar sehingga timeout perlu bekerja dalam .

Pada kesempatan kali ini saya akan menjelaskan cara menggunakan array Iteration di JavaScript. Perlu teman-teman ketahui sebelumnya, didalam dunia pemrograman Iteration atau iterasi adalah model untuk pengembangan system yang bersifat dinamis atau untuk lebih mudahnya dapat diartikan dengan setiap tahapan proses pengembangan system yang dapat diulang jika terdapat kekurangan maupun kesalahan.

Salah satunya adalah array iterasi, dimana untuk menggunakan array iterasi terdapat beberapa method yang dapat digunakan khusus untuk penanganan array, berikut dibawah ini beberapa method array iteration beserta dengan contohnya :

  • Array.forEach()

Metode forEach() akan memanggil fungsi (panggilan balik) satu kali untuk setiap elemen array.

Berikut Contohnya :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>CaraMenggunakan ArrayIterationDiJavaScript</title>

</head>

<body>

<h2></h2>

</body>

<script>

var text="";

varnumbers=[45,4,9,16,25];

numbers.forEach(myFunction);

document.getElementsByTagName("h2")[0].innerHTML=text;

functionmyFunction(value,index,array){

    text =text+value+"<br>";

}

</script>

</html>

  • Array.map()

Metode map() membuat larik baru dengan melakukan fungsi pada setiap elemen larik dan tidak menjalankan fungsi untuk elemen array tanpa nila maupun mengubah array asli.

Berikut Contohnya :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>CaraMenggunakan ArrayIterationDiJavaScript</title>

</head>

<body>

<h2></h2>

</body>

<script>

var numbers1=[10,30,70,80,100];

varnumbers=numbers1.map(myFunction);

document.getElementsByTagName("h2")[0].innerHTML =numbers;

functionmyFunction(nilai,index,array){

    returnnilai*2;

}

</script>

</html>

  • Array.filter()

Metode filter() membuat larik baru dengan elemen larik yang berhasil di uji dan pada contoh disini membuat larik baru dari elemen dengan nilai yang lebih besar dari pada 20.

Berikut Contohnya :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>CaraMenggunakan ArrayIterationDiJavaScript</title>

</head>

<body>

<h2></h2>

</body>

<script>

var numbers1=[8,45,9,20,25,72,99,4];

varnumbers= numbers1.filter(myFunction);

document.getElementsByTagName("h2")[0].innerHTML=numbers;

function myFunction(value,index,array){

    returnvalue>20;

}

</script>

</html>

  • Array.reduce()

Metode reduce() menjalankan fungsi pada setiap elemen larik untuk menghasilkan (menguranginya menjadi) satu nilai. Metode reduce () bekerja dari kiri ke kanan dalam larik dan tidak mengurangi array asli.

Berikut Contohnya :

Pada contoh ini mencari jumlah semua angka yang ada di dalam array

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>CaraMenggunakan ArrayIterationDiJavaScript</title>

</head>

<body>

<h2></h2>

</body>

<script>

var numbers=[2,4,3,1];

varsum=numbers.reduce(myFunction);

document.getElementsByTagName("h2")[0].innerHTML ="Jumlahnya adalah "+sum;

functionmyFunction(total,value,index,array){

    returntotal+ value;

}

</script>

</html>

Sampai disini penjelasan saya cara menggunakan array Iteration di JavaScript, semoga bermanfaat.

Apa cara yang benar untuk menulis array javascript?

Cara Membuat Array pada Javascript Pada javascript, array dapat kita buat dengan tanda kurung siku ( [...] ). Contoh: var products = []; Maka variabel products akan berisi sebuah array kosong.

Apa itu Iterable di javascript?

Perulangan for/of melakukan iterasi atas nilai-nilai iterable. Apa itu iterable? Sederhananya, sebuah iterable adalah objek yang memiliki iterator. Contoh iterable adalah array dan set. Iterator adalah properti dari objek yang menyediakan mekanisme untuk melintasi objek.

Apa array itu?

Array adalah variabel yang mempunyai indeks sehingga dapat menyimpan sejumlah data yang bertipe sama. Dimensi array adalah jumlah indeks pada variabel array. Array multi dimensi (lebih dari satu indeks, maksimal 7 indeks). Dalam perhitungan, array sering digunakan untuk operasi matriks.