Question

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

加载JSON格式化数据
使用加载的JSON数据生成HTML元素并将其呈现在div
使用jQuery UI滑块
随机化一个介于1和已加载元素总数之间的数字
使jQuery UI滑块滚动（动画）到代表随机数的元素，持续时间为500毫秒
加载更多JSON格式化数据
替换页面上的其他元素
依旧......

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

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

我想要它做的是：

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

理想的是，如果我可以在一个地方设置这个序列/事件链，例如在事件处理程序中。如果我想以不同的顺序调用函数或不调用所有函数，我只需要设置不同的序列/链。一个例子可能是：

随机化一个介于1和已加载元素总数之间的数字，并将其传递给...
使jQuery滑块滑动（动画）到元素的函数。动画结束后......

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

我希望你明白我在寻找什么。我想从单个函数控制整个执行序列。这个功能将是“管弦乐队的指挥”，所有其他功能将是管弦乐队的不同乐器部分。这个导体功能需要耳朵，所以它可以听到小提琴手完成她的独奏，并可以告诉喇叭开始播放。请原谅我的陈词滥调，但我希望能让我更容易理解我想做的事情。

提前致谢！ /托马斯

Answer 1

jQuery .queue()功能会帮助你吗？

Answer 2

你能存储一个数组的序列变量（你可以改变它），然后在每个函数的末尾调用一个音序器吗？

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

伪代码：

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
   ...
}

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

/托马斯

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

4 个答案: