1

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

  1. 加载 JSON 格式的数据
  2. 使用加载的 JSON 数据生成 HTML 元素并将它们呈现在 div 中
  3. 使用 jQuery UI 滑块使 div 内的元素可滚动
  4. 随机化一个介于 1 和加载元素总数之间的数字
  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 滑块滑动（动画）到元素的函数。动画结束时...

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

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

提前致谢！/托马斯

4

4 回答 4

1

jQuery .queue()函数会帮助你吗？

于 2010-11-17T15:10:25.037 回答
0

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

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

伪代码：

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]
}
于 2010-11-17T15:14:26.330 回答
0

我尝试执行此代码：

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 对调用函数的上下文很敏感。

/托马斯

于 2010-11-17T16:36:13.263 回答
0

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

$("#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
   ...
}

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

/托马斯

于 2010-11-18T08:29:15.513 回答