如何重复显示数组中的每个元素并在按钮单击时停止它答案

【问题标题】：How to show every elements from array repeatedly and stop it on button click如何重复显示数组中的每个元素并在按钮单击时停止它
【发布时间】：2017-04-21 09:53:47
【问题描述】：

我想制作一个每个目的地反复弹出的游戏。然后，当用户按下停止按钮时，会选择随机位置。我可以进行随机选择，但我不知道如何让数组中的每个选择在用户按下停止按钮之前连续播放。下面是我到目前为止所做的。

var random_place_array = ['Paris', 'Tokyo', 'Bangkok', 'New York'];
var place_length = random_place_array.length;

function start() {
  //once click, clear innerHTML and play the items in array

  for (var i=0; i<=place_length-1; i++) {
    showPlace = "";
    if (i<place_length) {
      showPlace = showPlace + random_place_array[i];
      document.getElementById("place").innerHTML = showPlace;   
    } else {
      i=0;
      start();
    }
   }
  }

现在我的document.getElementById("place").innerHTML 只显示数组中的最后一个元素。

【问题讨论】：

每次使用 showPlace=" " 进行初始化时，将其放到循环外
Constantly loop a javascript array and display results to div?的可能重复
@aimee，不，不是，没有按钮。
我认为唯一的区别是当用户按下停止按钮时，您只需调用 clearInterval(interval); 其中 interval = setInterval(....) 停止旋转，如前所述，您必须添加延迟否则变化不会很明显

标签： javascript html arrays loops

【解决方案1】：

这可以通过setInterval 解决：

const places = ['Paris', 'Tokyo', 'Bangkok', 'New York'];
let index = 0;

const interval = setInterval(() => {
    document.getElementById('place').innerHTML = places[index];        
    index = (index + 1) % places.length;
}, 100);

const stop = () => clearInterval(interval)

还有你的按钮：

<button onclick="stop();">Select a place</button>

【讨论】：

【解决方案2】：

您可以使用setInterval 并清除点击间隔。索引可以用余数运算符和数组的长度来分配。

function change() {
    document.getElementById("out").innerHTML = random_place_array[index++];
    index %= random_place_array.length;
}
  
function stop() {
    clearInterval(intervalID);
}

var random_place_array = ['Paris', 'Tokyo', 'Bangkok', 'New York'],
    intervalID = setInterval(change, 200),
    index = 0;

<div id="out"></div><br>
<button onclick="stop();">Stop</button>

【讨论】：

你好，是否可以在按下开始按钮后进行间隔运行而不使用分离功能？如果我希望每个地方都有不同的颜色，我该怎么办？非常感谢。
要在按钮上启动，您需要将intervalID = setInterval(change, 200) 放入函数中。对于不同的颜色，您可以在城市中添加 span 标签，或者使用 DOM 元素并切换可见性。

【解决方案3】：

你正在使用条件：

i<=place_length-1;

在你的 for 循环中检查条件：

if (i<place_length)

第二个陈述永远是正确的。

尝试删除 for 循环中的条件。

for (var i=0; ; i++)

【讨论】：