javascript - 用于启动/停止无限循环的按钮，每个函数之间有延迟

Question

我正在尝试创建一个函数，单击按钮将启动每个函数的循环，每个函数之间有 5 秒的延迟，并无限循环，直到再次单击按钮。我很接近这个，但 5 秒后，它只执行集合中的最后一个函数(星期二)，并且不会在每个函数之间有延迟地迭代它们。

function links() {
safety
daily
monday
tuesday
}

var intervalId;
function toggleIntervalb() {

  if (!intervalId) {
    intervalId = setTimeout(links, 5000); 
  } else {
    clearInterval(intervalId);
    intervalId = null;
  }
}

function safety(){
document.getElementById("fires").style.display = 'none';
document.getElementById("safety").style.display = 'block';
document.getElementById("daily").style.display = 'none';
document.getElementById("monday").style.display = 'none';
document.getElementById("tuesday").style.display = 'none';

}
function daily(){
document.getElementById("fires").style.display = 'none';
document.getElementById("safety").style.display = 'none';
document.getElementById("daily").style.display = 'block';
document.getElementById("monday").style.display = 'none';
document.getElementById("tuesday").style.display = 'none';

}
function monday(){
document.getElementById("fires").style.display = 'none';
document.getElementById("safety").style.display = 'none';
document.getElementById("daily").style.display = 'none';
document.getElementById("monday").style.display = 'block';
document.getElementById("tuesday").style.display = 'none';

function tuesday(){
document.getElementById("fires").style.display = 'none';
document.getElementById("safety").style.display = 'none';
document.getElementById("daily").style.display = 'none';
document.getElementById("monday").style.display = 'none';
document.getElementById("tuesday").style.display = 'block';

**第二次尝试: 更接近这个(包括按钮) jsfiddle 新手 - 无法让我的代码在这里工作:https://jsfiddle.net/unqrhxtp/16

所以，我还包括了pastebin(另存为.html并打开):https://pastebin.com/EwHVqmHJ

目前，代码在执行第一个函数后停止。它似乎仅在第一个元素上循环(如果您手动单击另一个链接，它会强制返回到集合中的第一个函数)。
提前致谢。

Answer 1

更改此行:

intervalId = setTimeout(links, 5000); 

从 setTimeout 到 setInterval 可能会解决这个问题

intervalId = setInterval(links, 5000); 

更新

阅读您更新的问题后，我认为这样的事情可以解决您的问题:

// Gather functions in an array, easier to loop trough
var links = [
  safety,
  daily,
  monday,
  tuesday,
  wednesday,
  thursday
]

function cyclelinks() { 
  links.forEach(function(link, index) {
    var delay = index * 5000;
    var fn = links[index];
    setTimeout(fn, delay)
  });  
}

var intervalId;
function toggleInterval() {
  var btn = document.getElementById("logo");

  if (!intervalId) {
    var delay = links.length * 5000; // repeat after all functions are called with 5 sec delay
    cyclelinks()
    intervalId = setInterval(cyclelinks, delay); 
  } else {
    clearInterval(intervalId);
    intervalId = null;
    location.reload();
  }
}