Как отображать несколько строк одну за другой с помощью javascript

Question

Итак, что я хочу создать простую веб-страницу, которая отображает несколько текстов из массива один за другим, я пробовал так много способов SetTimeout, Set interval, и ничего не работает это дает мне только последнее слово, подобное этому l oop все время поворачивается и дает мне последний результат

<h1 class="name" id="text"></h1> html code
<script>
var cars = ["Saab", "Volvo", "BMW"];
var i  = 0 ;
setTimeout(function loop(){
do {
document.getElementById("text").innerHTML = cars[i];
i++;
}
while (i < cars.length);  
},4000)
</script>

Answer 1

Итерируйте массив и внутри forEach обратного вызова используйте setTimeout. В этом случае нет необходимости в do & while l oop. Поскольку вы хотите отображать его один раз за раз с задержкой, вы необходимо изменить значение времени. Вы можете сделать это, умножив индекс на постоянное время

var cars = ["Saab", "Volvo", "BMW"];
const element = document.getElementById("text");
cars.forEach((item, index) => {
  setTimeout(() => {
    element.innerHTML = item;
  }, index * 1000)
})

<h1 class="name" id="text"></h1>

Answer 2

Попробуйте следующее:

<h1 class="name" id="text"></h1> html code
<script>
    var cars = ["Saab", "Volvo", "BMW"];
    var i  = 0 ;
    const timer = setInterval(function () {
        if (i < cars.length) {
            document.getElementById("text").innerHTML += cars[i] + <br>;
            i++;
        }
        else {
            clearInterval(timer);
        }
    }, 4000)
</script>

Answer 3

Есть так много способов сделать это. Один из них - использовать setInterval и перебирать массив автомобилей в каждом интервале. И после итерации go к следующему значению путем увеличения итератора на единицу.

В приведенном ниже примере используется закрытие для сохранения переменной итератора в своей собственной области.

const cars = ["Saab", "Volvo", "BMW"];
const textElement = document.getElementById("text");

function carDisplayer() {
  let i = 0;
  return function(cars) {
    let interval = setInterval(() => {
      if (i < cars.length) {
        textElement.textContent = cars[i];
        i++;
      } else {
        clearInterval(interval);
        i = 0;
     }
    }, 1000);
  }
}

let displayCars = carDisplayer();
displayCars(cars);

<h1 class="name" id="text"></h1>

Answer 4

вот оба возможных решения. если хотите остановиться на последнем. или если вы хотите показать, сохраните его в l oop.

<h1 class="name" id="text"></h1> html code
<script>
var cars = ["Saab", "Volvo", "BMW"];
var i  = 0 ;
let currentIndex = 0;
let inter_ = setInterval(function loop(){
   if(currentIndex >= cars.length){
       // if you want to loop  then the following line
       currentIndex = 0;
       // if you want to stop at the last one then uncoment the following lines
      // return clearInterval(inter_);
   }

   showCar();
   
}, 4000)


function showCar(){
    document.getElementById("text").innerHTML = cars[currentIndex++];
}

showCar()    

</script>

Answer 5

Вы можете использовать инкрементный тайм-аут для другого текста. Они будут печатать в разных timelines.

var cars = ["Saab", "Volvo", "BMW"];
    cars.forEach((car, index) => {
      setTimeout(function loop() {
        document.getElementById("text").innerHTML = car;
      }, index * 2000)
    })

<h1 class="name" id="text"></h1>

Если вы хотите выучить async programming, вы можете сделать то же самое, используя async-await. Пожалуйста, посмотрите на пример ниже.

// Функция печати, которая печатает через 1 секунду c.

  const print = (car) => {
      return new Promise(resolve => {
        setTimeout(() => {
          // Print here
          document.getElementById("text").innerHTML = car;
          resolve()
        }, 1000)
      })
    }

// Основная функция, теперь используйте ее

async function main() {
  var cars = ["Saab", "Volvo", "BMW"];
  for (let index = 0; index < cars.length; index++) {
    await print(cars[index])
  }
}
main()

Рабочий образец:

const print = (car) => {
  return new Promise(resolve => {
    setTimeout(() => {
      // Print here
      document.getElementById("text").innerHTML = car;
      resolve()
    }, 1000)
  })
}
async function main() {
  var cars = ["Saab", "Volvo", "BMW"];
  for (let index = 0; index < cars.length; index++) {
    await print(cars[index])
  }
}
main()

<h1 class="name" id="text"></h1>

Answer 6

var cars = ["Saab", "Volvo", "BMW"];
var i  = 0 ;
function loop() {
document.getElementById("text").innerHTML = cars[i];
    if (++i < cars.length) {
        setTimeout(loop, 4000);
    }
};

loop();

<h1 class="name" id="text"></h1>

Answer 7

Вот возможное решение:

var cars = ["Saab", "Volvo", "BMW"];
var i  = 0 ;
setInterval(function (){
document.getElementById("text").innerHTML = cars[i];
i++;
i = i%3;
}, 4000)

<h1 class="name" id="text"></h1>

Проблема в вашей реализации заключалась в do-while l oop, который выполняет итерацию сразу по всем элементам.

Если вы используете setInterval вся функция вызывается каждые четыре секунды.

Answer 8

может быть, вы можете установить таймер, если есть машина для отображения

<h1 class="name" id="text"></h1> html code
<script>
var cars = ["Saab", "Volvo", "BMW"];
var i  = 0 ;

function displayCar() {
    document.getElementById("text").innerHTML = cars[i++];
    if (i < cars.length) {
        setTimeout(displayCar, 4000)
    }
}

setTimeout(displayCar, 4000)
</script>

Answer 9

, если вы используете внутренний HTML с = , он заменяет новое значение.

Таким образом, внутренний HTML элемента 'text' будет изменен Saab-> Volvo-> BMW .

Это последнее слово. правильно?

Попробуйте вот так,

var cars = ["Saab", "Volvo", "BMW"];
let i  = 0 ;
setInterval(function loop(){
    document.getElementById("text").innerHTML += cars[i];
    i++;
},1000);