Как l oop через массив и отображать каждое значение рядом друг с другом с интервалом 500 мс, используя чистое JS? - PullRequest
Новая
       11

Как l oop через массив и отображать каждое значение рядом друг с другом с интервалом 500 мс, используя чистое JS?

0 голосов
/ 24 февраля 2020

Значение l oop, приведенное ниже, в основном циклически проходит по моему массиву, который равен sumFormat, затем отображает каждое значение массива с интервалом 500ms, что нормально, но его значения массива отображаются только один раз за раз, поэтому

например, если массив содержит [1, 2, 3]

  • , он отображает 1, затем 500ms позже отображает 2 вместо 1,
  • но я хочу, чтобы он отображал 1, затем 500ms, позже отображал 2 рядом с
  • 1, поэтому 1 2
  • , а затем 1 2 3 и так далее,

Я пытался понять это, но, похоже, не могу понять это правильно. 

for (var i = 0; i < sumFormat.length; i++) {
    (function(i) {
        setTimeout(function() {
            factOut.innerHTML = sumFormat[i];
        }, 500 * i);
    })(i);
}

Ответы [ 3 ]

3 голосов
/ 24 февраля 2020

Объединить с существующим innerHTML вместо того, чтобы просто присвоить ему, так как это перезапишет все, что было ранее. Вы также можете использовать let вместо var, чтобы сделать код более аккуратным. Кроме того, поскольку вы только вставляете текст , а не HTML разметку, лучше использовать textContent вместо: 

const sumFormat = [1, 2, 3, 4, 5];
for (let i = 0; i < sumFormat.length; i++) {
  setTimeout(function() {
    factOut.textContent += ' ' + sumFormat[i];
  }, 500 * i);
}
<div id="factOut"></div>

Другой метод, соединяя элементы массива от 0 до текущего индекса: 

const sumFormat = [1, 2, 3, 4, 5];
for (let i = 0; i < sumFormat.length; i++) {
  setTimeout(function() {
    factOut.textContent = sumFormat.slice(0, i + 1).join(' ');
  }, 500 * i);
}
<div id="factOut"></div>
2 голосов
/ 24 февраля 2020

Я бы изменил здесь пару вещей.

Использование нескольких setTimeout и установка времени ожидания, так как увеличение значений может вызвать проблемы, если вы хотите их много, время ожидания ограничено в JS .

Один вариант, возможно, использует setInterval в качестве кого-то здесь, как показано, но мой фаворит использует asyn c / await.

Также, если ваш список стал очень длинным, постоянно меняя внутренний HTML не будет очень добрым к DOM, вместо этого создание другого элемента DOM и добавление их будет более эффективным. Другим преимуществом их использования является то, что они значительно упрощают их стилизацию.

Ниже приведен пример использования async/await и добавления в DOM вместо постоянного обновления внутреннего HTML, и для удовольствия просто придав ему немного стиля. 

const delay=ms=>new Promise(r=>setTimeout(r,ms));

(async function() {
  const sumFormat = [1,2,3,4];
  for (const i of sumFormat) {
    const num = document.createElement('span');
    num.innerText = i;
    factOut.appendChild(num);
    await delay(500);
  }
}());
span {
  padding: 0.2rem 0.4rem;
  margin: 0.2rem 0.3em;
  background-color: lightblue;
  border: 1px solid black;
  border-radius: 0.5rem;
}
<div id="factOut"></div>
0 голосов
/ 24 февраля 2020

Вот пример с setInterval()

function SetValue(text, at){
     factOut.innerHTML += text[at] + (text.length-1 == at ?"":" "); 
} 

var sumFormat = [1,2,3,4,5];
var i = 0;
var myinterval = setInterval(function(){
     if(i == sumFormat.length){
      clearInterval(myinterval);
      return;
     }
     SetValue(sumFormat,i);
     i++;
},500) 
<div id="factOut" />
...