时间戳

首页 > 解决方案 > 如何在 JavaScript/HTML 中一次又一次地重复数组列表中的项目

javascript - 如何在 JavaScript/HTML 中一次又一次地重复数组列表中的项目

问题描述

我试图在我的网站上一个一个地显示数组中的文本，我可以做到一次，但我希望一次又一次地重复列表（重新开始），只要用户保持页面打开。

下面的代码在没有 while 循环的情况下工作，但只有一次：

<h1 id="looper" ></h1>

<script>
var i = ["ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ", "Hello", "hola", "नमस्ते", "你好!", "Здравствуйте"];
for( var j = 0 ; j < i.length; j++ ) {
  setTimeout( (function(j){ return function(){$("#looper").text(i[j]);}})(j), j*1000 );
}
</script>

但是当我使用 while 循环时，浏览器会超载或冻结。

  while(true){
  for( var j = 0 ; j < i.length; j++ ) {
  setTimeout( (function(j){ return function(){$("#looper").text(i[j]);}})(j), j*1000 );
   }
  };

我正在使用 Django，以防它也可以使用 python 来完成。

标签： javascripthtml

解决方案

您可以使用setInterval而不是setTimeout这样：

<script>
var i = ["ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ", "Hello", "hola", "नमस्ते", "你好!", "Здравствуйте"];
for( var j = 0 ; j < i.length; j++ ) {
  //vvvvv THIS CODE CHANGED vvvvv
  setInterval( (function(j){ return function(){$("#looper").text(i[j]);}})(j), j*1000 );
}
</script>

这样做的原因是setTimeout设置一个函数运行一次，而setInterval让它像你想要的那样一遍又一遍地运行

推荐阅读