如何设置要在 JavaScript 中执行的函数序列？

Question

我正在开发一个 JavaScript 驱动的网站，其中有很多需要按特定顺序执行的内容。很多内容涉及动画和 AJAX 加载。一些伪代码可能如下所示：

1. 加载 JSON 格式的数据
2. 使用加载的 JSON 数据生成 HTML 元素并将它们呈现在 div 内
3. 使用 jQuery UI 滑块使 div 内的元素可滚动
4. 随机化 1 到加载总数之间的数字elements
5. 使 jQuery UI 滑块滚动（动画）到表示随机数字的元素，持续时间为 500 毫秒
6. 加载更多 JSON 格式的数据
7. 替换页面上的其他元素
8. 等等...

其中的每个步骤都包含在一个函数中- 一个函数加载 JSON 数据，另一个函数生成 HTML 元素，第三个函数初始化 jQuery UI 滑块，依此类推。将代码封装在函数中使代码更易于阅读，但最重要的是，我希望能够根据页面上发生的情况以不同的顺序调用函数，并且我希望确保一个函数在执行下一个。

如果只有不涉及 AJAX 或 jQuery 动画的常规函数​​，我只需执行我想要执行的函数，一个接着一个。问题是我需要等待动画和数据检索功能完成才能继续。为了帮助我，jQuery 中的动画和 AJAX 方法允许我发送回调。但这就是我迷路的地方。

我希望它执行以下操作：

1. 加载 JSON 数据。如果加载成功，继续...
2. 生成 HTML 元素
3. 使元素可滚动
4. 随机化一个介于 1 和加载元素总数之间的数字，并将其传递给...
5. 使 jQuery 滑块滑动的函数（动画）到元素。动画完成后...
6. 加载更多 JSON 格式的数据。如果加载成功，请继续...
7. 替换页面上的其他元素

理想的情况是，我可以在一个位置（例如在事件处理程序内）设置此事件序列/链。如果我想以不同的顺序调用函数或者不调用所有函数，我只需设置不同的序列/链。一个示例可以是：

1. 随机化 1 和加载元素总数之间的数字并将其传递给...
2. 使 jQuery 滑块滑动（动画）到元素的函数。当动画完成时...

这意味着我必须控制每个步骤中的回调。

我希望你明白我在寻找什么。我想从单个函数控制整个执行序列。该功能将是“管弦乐队的指挥”，所有其他功能将是管弦乐队的不同乐器部分。指挥需要耳朵的作用，这样它才能听到小提琴家完成独奏的声音，并告诉圆号开始演奏。请原谅我的老套寓言，但我希望它能让人更容易理解我想做什么。

提前致谢！ /托马斯

Answer 1

jQuery .queue() 函数对您有帮助吗？

Answer 2

您能否存储一个数组形式的定序器变量（您可以更改该变量），然后在每个函数的末尾调用定序器？

然后，您可以通过每个函数传递一个步骤代码，并将其与定序器变量交叉引用以了解下一步应该是什么。

伪代码：

var func['1'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

var func['2'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

var func['3'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

var func['4'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

function sequencer(seq) {
  seq = seq + 1;
  window.func[seq]
}

Answer 3

我尝试执行此代码：

var seq = 0;
var func = [];

func[1] = function(seq) {
    setTimeout(function() {
        console.log("Executing function 1");
        sequencer(seq);
    }, 2000);

}

func[2] = function(seq) {
    console.log("Executing function 2");
    sequencer(seq);
}

func[3] = function(seq) {
    console.log("Executing function 3");
}

function sequencer(seq) {
    seq = seq + 1;
    func[seq].call();
}

sequencer(seq);

但结果（在 Firebug 中）是：

Executing function 1

func[seq] is undefined
[Break on this error] func[seq].call(); 

我认为问题是由上下文引起的，但我不确定。 JavaScript 对调用函数的上下文很敏感。

/托马斯

Answer 4

我发现我想要实现的目标对于我的目的来说有点矫枉过正。所以我决定采用不同的方法。我可以将一个或多个布尔变量作为参数发送给函数，并使用它们来决定是否执行第二个函数。这是一个例子：

$("#justOneStep").click(function() {
   loadImage(false);
});

$("#twoStepsPlease").click(function() {
   loadImage(true);
});


function loadImage(boolDoMore) {
   // Do the stuff that loads an image
   ...

   if(boolDoMore) {
      nextFunction();
   }
}

function nextFunction() {
   // Do some more stuff
   ...
}

不是很花哨，但易于理解和控制，足以满足我目前的需求。

/托马斯