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

Posted 2023-02-21

【中文标题】如何用javascript一一显示多个字符串

【英文标题】：How to display multiple strings one by one with javascript

【发布时间】：2020-08-20 07:59:49

【问题描述】：

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

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

【参考方案1】：

试试这个：

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

【参考方案2】：

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

【参考方案3】：

迭代数组并在forEach回调中使用setTimeout。在这种情况下，不需要do和while循环。因为你想一次显示一次，有延迟，你需要改变计时值。您可以通过将索引乘以常数时间来做到这一点

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>

【参考方案4】：

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

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

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>

【参考方案5】：

这里有两种可能的解决方案。 如果你想停在最后一个。 或者如果你想显示保持循环。

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

【参考方案6】：

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

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，则每四秒调用一次整个函数。

【讨论】：

请不要将您的代码发布到第三方网站，因为这些链接会随着时间的推移而失效，从而使您的回答毫无意义。只需将您的代码作为代码 sn-p 包含在您的答案中（工具栏上的 <> 按钮）。

【参考方案7】：

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>

【参考方案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>

【参考方案9】：

如果您使用带有 = 的 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);