Question

我试图每隔一秒钟无限时间更改一次跨度的值，但我没有获得如何执行此任务的方法。现在，我正在使用setTimeout函数，该函数在值结束时将所有值更改一次。

   <span id="second-span"></span>

   <script>
    setTimeout('document.getElementById("second-span").innerHTML = "Creator ";', 0);
    setTimeout('document.getElementById("second-span").innerHTML = "Foodie ";', 3000);
    setTimeout('document.getElementById("second-span").innerHTML = "Traveller";', 6000);
    setTimeout('document.getElementById("second-span").innerHTML = "Fitness Freak";', 9000);
    setTimeout('document.getElementById("second-span").innerHTML = "Makeup Genie";', 12000);
    setTimeout('document.getElementById("second-span").innerHTML = "Vlogger";', 15000);
    setTimeout('document.getElementById("second-span").innerHTML = "Filmmaker";', 18000);
    setTimeout('document.getElementById("second-span").innerHTML = "Artist  ";', 21000);
    setTimeout('document.getElementById("second-span").innerHTML = "Narrator";', 24000); 

</script>

能否请您告诉我如何无限次执行此任务。我是javascript新手，请指导我，我将非常感谢您。

Answer 1

将所有值存储在列表中。然后启动一个函数，该函数在某个索引处选择一个值，更新索引，然后在一秒钟内重新启动。

const values = ['Creator', 'Foodie', 'etc']
let index = 0

const change = () => {
  document.getElementById('to-change').innerHTML = values[index];
  index = ++index % values.length;
  setTimeout(change, 1000);
}

change()

<span id="to-change" />

Answer 2

您可以使用setInterval

function func() {
    // Do something here
}

setInterval(func,1000) // Runs func function every 1 second

Answer 3

使用setInterval()代替setTimeout()。但是您必须知道这两个参数都有两个参数，一个是回调函数，而不是字符串。另一个参数是将调用回调的毫秒数。如果使用setInterval，则您将在第二个参数中指定的每n毫秒内触发一次回调函数。

您还需要稍微缩短代码的可读性。无需经常重复自己。

var span = document.getElementById("second-span");

setInterval(function(){ span.innerHTML = "Creator ";     }, 0);
setInterval(function(){ span.innerHTML = "Foodie ";      }, 3000);
setInterval(function(){ span.innerHTML = "Traveller";    }, 6000);
setInterval(function(){ span.innerHTML = "Fitness Freak";}, 9000);
setInterval(function(){ span.innerHTML = "Makeup Genie"; }, 12000);
setInterval(function(){ span.innerHTML = "Vlogger";      }, 15000);
setInterval(function(){ span.innerHTML = "Filmmaker";    }, 18000);
setInterval(function(){ span.innerHTML = "Artist  ";     }, 21000);
setInterval(function(){ span.innerHTML = "Narrator";     }, 24000);

Answer 4

您可以使用setInterval，但也不建议这样做。推荐使用递归使用setTimeout：

Cloudder::upload($path, $options, $image_name);

使用javascript

4 个答案: