Javascript 启动/停止无限循环的按钮，通过各功能之间的延迟

我试图创建一个函数，在点击一个按钮时，它将通过每个函数启动一个循环，每个函数和循环之间有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';

**第二次尝试： 使用此按钮关闭（包括按钮） JSFIDLE新手-无法在此处使用我的代码：

因此，我还包括pastebin（另存为.html并打开）：

当前，代码在执行第一个函数后停止。它似乎只在第一个元素上循环（如果您手动单击另一个链接，它将强制返回到集合中的第一个函数）。
提前感谢。

更改此行：

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();
  }
}

更改此行：

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();
  }
}

---

您应该使用setInterval，因为setTimeout在给定的时间之后运行意味着它可以正常工作，因为。如果你一步一步地运行这段代码，你就会明白我在说什么。当光标停留在settimeout上时，您的函数不会立即工作，它将等待5秒。

---

我希望我能帮你

你应该使用setInterval，因为setTimeout在给定的时间之后运行意味着它工作正常，因为。如果你一步一步地运行这段代码，你就会明白我在说什么。当光标停留在settimeout上时，您的函数不会立即工作，它将等待5秒。

---

我希望我能帮上忙

我设法想出了一个解决办法，尽管我并不完全满意。主要是因为它迫使我在循环开始前等待整整90秒。现在，这个就可以了，但我会留下这个空白，希望有人能发布一个更好的解决方案

//Loop through links upon click
function cyclelinks() { 
setTimeout(safety, 10000);
setTimeout(daily, 20000);
setTimeout(monday, 30000);
setTimeout(tuesday, 40000);
setTimeout(wednesday, 50000);
setTimeout(thursday, 60000);
}

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

  if (!intervalId) {
    intervalId = setInterval(cyclelinks, 90000); 
  } else {
    clearInterval(intervalId);
    intervalId = null;
    location.reload();
  }
}

---

我设法想出了一个解决办法，尽管我并不完全满意。主要是因为它迫使我在循环开始前等待整整90秒。现在，这个就可以了，但我会留下这个空白，希望有人能发布一个更好的解决方案

//Loop through links upon click
function cyclelinks() { 
setTimeout(safety, 10000);
setTimeout(daily, 20000);
setTimeout(monday, 30000);
setTimeout(tuesday, 40000);
setTimeout(wednesday, 50000);
setTimeout(thursday, 60000);
}

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

  if (!intervalId) {
    intervalId = setInterval(cyclelinks, 90000); 
  } else {
    clearInterval(intervalId);
    intervalId = null;
    location.reload();
  }
}

---

使用

var intervalId=setInterval（links，5000）

并随后使用

clearInterval（intervalId）

停止它。使用工作示例（包括按钮）更新了OP。希望这能更好地描述我正在尝试做的事情。@Stumey586，您的代码确实有效，但似乎有我的代码所具有的初始延迟。开始前需要几秒钟。啊，当然，没有测试好。我认为发生了两件事：setTimeout延迟应该立即开始，延迟0秒。另外，在设置间隔之前调用

cyclelinks

函数，使其立即启动。我已经用这些更改更新了代码段。最后但并非最不重要的一点是，如果您想中途取消循环，还可以将

setTimeout

存储在一个变量中，方法与

setInterval

use

var intervalId=setInterval（links，5000）

以及随后的

clearInterval（intervalId）相同

停止。使用工作示例（包括按钮）更新了OP。希望这能更好地描述我正在尝试做的事情。@Stumey586，您的代码确实有效，但似乎有我的代码所具有的初始延迟。开始前需要几秒钟。啊，当然，没有测试好。我认为发生了两件事：setTimeout延迟应该立即开始，延迟0秒。另外，在设置间隔之前调用

cyclelinks

函数，使其立即启动。我已经用这些更改更新了代码段。最后但并非最不重要的一点是，如果您想中途取消循环，您还可以将

setTimeout

存储在变量中，与

setInterval

updated OP.Trouble with iteration.updated OP.Trouble with iteration，据我所知，这将解决您的问题。我已更新了下面的答案。据我所知，这将解决您的问题