如何让JavaScript for循环按1到4顺序执行，结束时随机停在1-4任一位置

你当前的代码每次setInterval触发时都会完整遍历全部4条数据输出，所以三轮循环跑完最后必然停在4的位置，只要在终止循环前的最后一轮遍历中，按随机生成的停止位截断遍历即可实现需求。

核心修改点 #

• 在setInterval外预先生成1~4的随机停止值
• 遍历数据时判断如果是最后一轮循环，只遍历到随机停止位就终止
• 调整计数逻辑位置保证遍历长度判断准确

完整可运行修改后代码 #

<!DOCTYPE html>
<html>
  <head>
    <script
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
      type="text/javascript"
    ></script>
  </head>

  <body style="background: gray;">
    <button id="k">Hello</button>
  </body>
</html>

<script>
  var data = [
    {
      count: "1",
      name: "one"
    },
    {
      count: "2",
      name: "two"
    },
    {
      count: "3",
      name: "three"
    },
    {
      count: "4",
      name: "four"
    }
  ];

  $("#k").click(function () {
    let count = 0;
    // 预先生成1-4的随机停止位
    const randomStop = Math.floor(Math.random() * 4) + 1;
    const interVal = setInterval(function () {
      count += 1;
      // 非最后一轮完整遍历，最后一轮只遍历到随机停止位
      const loopLength = count === 3 ? randomStop : data.length;
      for (let i = 0; i < loopLength; i++) {
        const _data = data[i];
        setTimeout(function () {
          console.log("data", _data.count);
        }, 50 * i);
      }
      if (count === 3) clearInterval(interVal);
    }, 600);
  });
</script>

替换现有代码即可实现每次点击按钮，循环结束后最终停在1~4的随机数值位置。

内容的提问来源于stack exchange，提问作者TechDev