Fügen Sie eine Verzögerung nach der Ausführung jeder iteration mit forEach-Schleife

Was Sie erreichen wollen, ist völlig möglich, mit Array#forEach — wenn auch in einem anderen, wie Sie vielleicht denken es ist. Sie können nicht tun, eine Sache wie diese:

var array = ['some', 'array', 'containing', 'words'];
array.forEach(function (el) {
  console.log(el);
  wait(1000); //wait 1000 milliseconds
});
console.log('Loop finished.');

... und erhalten die Ausgabe:

some
array          //one second later
containing     //two seconds later
words          //three seconds later
Loop finished. //four seconds later

Gibt es keine synchrone wait oder sleep Funktion in JavaScript, die blockiert alle code nach.

Der einzige Weg, um die Verzögerung etwas in JavaScript wird in einer nicht blockierenden Weise. Das bedeutet, dass mit setTimeout oder einer seiner verwandten. Wir können den zweiten parameter der Funktion, die wir passieren, um Array#forEach: es enthält den index des aktuellen Elements:

JS:

var array = ['some', 'array', 'containing', 'words'];
var interval = 1000; //how much time should the delay between two iterations be (in milliseconds)?
array.forEach(function (el, index) {
  setTimeout(function () {
    console.log(el);
  }, index * interval);
});
console.log('Loop finished.');

Mithilfe der index können wir berechnen, wenn die Funktion ausgeführt werden soll. Aber jetzt haben wir ein anderes problem: die console.log('Loop finished.') ausgeführt wird vor der ersten iteration der Schleife. Das ist, weil setTimout ist nicht–blockierend.

JavaScript setzt den Timeout in der Schleife, aber es muss nicht warten, bis die timeouts zu vervollständigen. Es wächst und ausführen von code nach der forEach.

Umgehen, dass wir verwenden können Promises. Wir bauen ein Versprechen Kette:

JS:

var array = ['some', 'array', 'containing', 'words'];
var interval = 1000; //how much time should the delay between two iterations be (in milliseconds)?
var promise = Promise.resolve();
array.forEach(function (el) {
  promise = promise.then(function () {
    console.log(el);
    return new Promise(function (resolve) {
      setTimeout(resolve, interval);
    });
  });
});

promise.then(function () {
  console.log('Loop finished.');
});

Gibt es einen ausgezeichneten Artikel über Promises in Verbindung mit forEach/map/filter hier.

Ich wird schwieriger, wenn das array dynamisch ändern können. In diesem Fall, ich glaube nicht, dass Array#forEach verwendet werden soll. Versuchen Sie, diese aus statt:

JS:

var array = ['some', 'array', 'containing', 'words'];
var interval = 2000; //how much time should the delay between two iterations be (in milliseconds)?

var loop = function () {
  return new Promise(function (outerResolve) {
    var promise = Promise.resolve();
    var i = 0;
    var next = function () {
      var el = array[i];
      //your code here
      console.log(el);
      if (++i < array.length) {
        promise = promise.then(function () {
          return new Promise(function (resolve) {
            setTimeout(function () {
              resolve();
              next();
            }, interval);
          });
        });
      } else {
        setTimeout(outerResolve, interval);
        //or just call outerResolve() if you don't want to wait after the last element
      }
    };
    next();
  });
};

loop().then(function () {
  console.log('Loop finished.');
});

var input = document.querySelector('input');
document.querySelector('button').addEventListener('click', function () {
  //add the new item to the array
  array.push(input.value);
  input.value = '';
});

HTML:

<input type="text">
<button>Add to array</button>

Zunächst müssen Sie den code ändern:

var items = document.querySelectorAll('.item'), i;

for (i = 0; i < items.length; ++i) {
  //items[i] <--- your element
}

Können Sie mit einer Schleife über Arrays, die leicht in JavaScript mit forEach, aber
leider ist es nicht so einfach mit den Ergebnissen einer
querySelectorAll

Lesen Sie mehr darüber hier

Kann ich rate Ihnen, Lesen Sie dieses Antwort finden eine passende Lösung für Schlaf

Ich denke Rekursion ist die einfachste Lösung.

function slowIterate(arr) {
  if (arr.length === 0) {
    return;
  }
  console.log(arr[0]); //<-- replace with your custom code 
  setTimeout(() => {
    slowIterate(arr.slice(1));
  }, 1000); //<-- replace with your desired delay (in milliseconds) 
}

slowIterate(Array.from(document.querySelector('.item')));