javascript - 通过包含函数的数组反转循环方向，无需 jQuery

Question

我有以下Javascript，其目的是使用户能够使用由eventListener<执行的函数的数组在多个菜单中前后循环。/...

var i = 0;
var steps = [
  function one() {do something},
  function two() {do something},
  function three() {do something},
  function four() {do something},
  function five() {do something}
]
//loops forward through array *successfully*
document.getElementById('forward').addEventListener("click", function() {
  steps[i]();
}
//loops backwards through array *unsuccessfully*
document.getElementById('backward').addEventListener("click", function() {
  steps[i]().reverse();
}

第一个 eventListener 函数成功循环了数组，但是第二个 eventListener 函数向后 ，无法反向循环数组(有点意外)。

首先，我不确定如何反向循环包含函数的数组。

其次，我想知道是否可以从该数组中的特定点反向循环数组；本质上，如果array已经循环，并且没有超过function Three()，是否有一个脚本允许用户向后循环到函数>two() 然后one()，然后再次前进？

我在 StackOverflow 上阅读了许多有关 array.reverse() 的问题，但是我发现没有一个问题似乎与函数的存在和/或反转数组中间的循环有关。

非常感谢您的回答，我们非常感激!

Answer 1

我认为您不需要循环数组。您需要“管理状态”，这意味着您递增和递减i。更新状态后，您可以使用 steps[i] 找到正确的函数并调用它。

var activeMenuIndex = 0;

var steps = [
  function one() {console.log("activate menu 1") },
  function two() {console.log("activate menu 2") },
  function three() {console.log("activate menu 3") },
  function four() {console.log("activate menu 4") },
  function five() {console.log("activate menu 5") }
];

var activateCurrentMenu = function() {
  var activator = steps[activeMenuIndex];
  
  if (activator) {
    activator();
  } else {
    console.log("Out of bounds!");
  }
};

var nextMenu = function() {
  // TODO: Check for out of bounds
  activeMenuIndex += 1;
  activateCurrentMenu();
};

var prevMenu = function() {
  // TODO: Check for out of bounds
  activeMenuIndex -= 1;
  activateCurrentMenu();
};


document.getElementById('forward').addEventListener("click", nextMenu);
document.getElementById('backward').addEventListener("click", prevMenu);

<button id="backward">back</button>
<button id="forward">next</button>

回答这个问题:循环函数数组与循环任何其他数组没有什么不同。您可以使用 for block ，或使用 foreach。

如果您想反向循环数组，可以调用 .reverse().foreach (这会改变原始数组)。