如何使用 javascript 一一显示多个字符串

Question

所以，我想制作一个简单的网页，一个接一个地显示数组中的多个文本，我已经尝试了很多设置超时、设置间隔的方法，但没有任何效果 它只给我像这样的最后一句话循环一直转动并给我最后的结果

<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.In 这种情况下不需要 do & while loop.Since 你想显示它一次延迟一次，您需要更改计时值。您可以通过将索引乘以常数时间来做到这一点

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

如果将 innerHTML 与 = 一起使用，它会替换新值。

因此，'text' 元素的 innerHTML 将更改为 Saab->Volvo->BMW。

最后一句话。对吗？

这样试试，

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

Answer 3

如果还有车要显示，也许你可以设置定时器

<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 4

这是一个可能的解决方案：

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 循环一次遍历所有元素。

如果您使用 setInterval，整个函数每四秒调用一次。

Answer 5

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 6

您可以对不同的文本使用增量超时。他们将以不同的方式打印 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 秒后打印的打印函数

  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 7

这是两种可能的解决方案。如果你想停在最后一个。或者如果你想展示让它循环播放。

<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 8

有很多方法可以做到这一点。一种是使用 setInterval 并在每个间隔迭代汽车数组。并在迭代后通过将迭代器递增 1 来转到下一个值。

下面的示例使用闭包将迭代器变量保持在其自己的范围内。

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 9

试试这个：

<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>

如何使用 javascript 一一显示多个字符串

How to display multiple strings one by one with javascript

html

javascript

arrays

string

display