javascript - 在 Javascript 中，如何每 5 秒打印一次数组中的单个元素？

Question

我有一个带有方法 [ .show()和.retrieve() ]的预制类 [ Msg ]。方法 '.show()' 向浏览器显示一条消息，作为无序列表中的最后一个列表项。'.retrieve()' 方法从服务器获取有限数量的消息。它将回调方法作为其唯一参数。它将传递一个字符串数组。数组中的每个字符串都包含一条消息。我有以下代码：

JS：

 Msg.retrieve(function(array) {
      for (var i = 0; i < array.length; i++) {
           Msg.show(array[i]); 
      }
 });

 // The code outputs all the messages to the screen at once as a bunch of list items. 

如何每五秒输出一条消息？我不确定如何使用 Javascript 的 setInterval() 方法。

任何帮助是极大的赞赏。谢谢！

Answer 1

var interval = setInterval(function() {
    Msg.show(array[i])
    i++
    if (i >= array.length) clearInterval(interval)
}, 5000)

setInterval将函数和时间量作为参数。

您也可以使用clearInterval清除间隔。

Answer 2

检索后，设置一个计时器并一次将数组移动一个值：

Msg.retrieve(function(array) {
     var timer = setInterval(function() {
         if(array.length) {
             Msg.show(array.shift()); 
         } else {
             // All messages displayed, array is empty
             clearInterval(timer);
         }
     }, 5000);
});

Answer 3

function makeArrayPrinter(arr, delayMillis) {
  var i=0;
  return function printer() {
    if (i < arr.length) {
      console.log(arr[i++]);
      setTimeout(printer, delayMillis);
    }
  }
}

var f = makeArrayPrinter([1, 2, 3, 4, 5], 5000);
f();