如何使用 setTimeout、setInterval 或循环显示？

Question

下面的代码笔展示了 setTimeout、setInterval 和 location.reload 的使用还有哪些其他选择？

我想要的下一级是 - 添加一个控件以允许用户轻松循环 forwards/backwards。

codepen 使用 setTimeout & location.reload（需要重新加载页面 - 想要避免这种情况） https://codepen.io/GuruAtWork/pen/PoPYbKK

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
    <div id="info">start</div>
    <script>
      var elem = document.getElementById("info");
      setTimeout(function () {
        elem.innerHTML = "one";
      }, 1000);
      setTimeout(function () {
        elem.innerHTML = "two";
      }, 2000);
      setTimeout(function () {
        elem.innerHTML = "three";
      }, 3000);
      setTimeout(function(){
         //window.location.reload(1);
         location.reload()
      }, 4000);
    </script>
  </body>
</html>

codepen 使用嵌套在 setTimeout 中的 setInterval https://codepen.io/GuruAtWork/pen/rNOBjBa

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
    <div id="info">start</div>
    <script>
      var elem = document.getElementById("info");
      setTimeout(function () {
         console.log("setTimeout 1000")
         elem.innerHTML = "setTimeout 1000";
         setInterval(function () {
           elem.innerHTML = "setInterval one";
           console.log("setInterval 1000")
         }, 4000);
      }, 1000);
      setTimeout(function () {
         console.log("setTimeout 2000")
         elem.innerHTML = "setTimeout 2000";
         setInterval(function () {
           console.log("setInterval 2000")
           elem.innerHTML = "setInterval two";
         }, 4000);
      }, 2000);
      setTimeout(function () {
         console.log("setTimeout 3000")
         elem.innerHTML = "setTimeout 3000";
         setInterval(function () {
           console.log("setInterval 3000")
           elem.innerHTML = "setInterval three";
         }, 4000);
      }, 3000);

    </script>
  </body>
</html>

Answer 1

可以用数组存储内容，循环索引。要进入 back/forward 只需更改 i 的值并更新。

var contents=["one", "two", "three"], i = 0;
setInterval(function() {
  document.getElementById("content").innerHTML = contents[i];
  if (++i >= 3) i = 0;
}, 1000);

<div id='content'></div>

如何使用 setTimeout、setInterval 或循环显示？

how to loop a display using setTimeout, setInterval or?

javascript

settimeout

setinterval

reload