[英]How do I set up sequences of functions that I want executed in JavaScript?
I'm working on a JavaScript driven site where I will have a lot of stuff that need's to be executed in a certain order. 我正在一个JavaScript驱动的网站上工作,在该网站上,我将有很多东西需要按特定顺序执行。 A lot of the stuff involves animations and AJAX-loading.
很多东西涉及动画和AJAX加载。 Some pseudo code could look like this:
一些伪代码可能看起来像这样:
Each step in this is wrapped in a function - one function loads the JSON data, another generates the HTML-elements, a third initializes the jQuery UI slider and so on. 每个步骤都包装在一个函数中-一个函数加载JSON数据,另一个函数生成HTML元素,第三个函数初始化jQuery UI滑块,依此类推。 Encapsulating the code in functions makes the code easier to read for me, but above all I want to be able to call the functions in different orders depending on what happens on the page and I want to be sure that one function has finished running before the next one is executed.
将代码封装在函数中使代码对我来说更容易阅读,但是最重要的是,我希望能够根据页面上发生的情况以不同的顺序调用函数,并且我想确保在函数执行之前,一个函数已经完成运行下一个执行。
If there was just regular functions that didn't involve AJAX or jQuery animations I'd just execute the functions I want to execute, one after the other. 如果只有不涉及AJAX或jQuery动画的常规函数,我将一个接一个地执行我想执行的功能。 The problem is that I need to wait for the animations and data retrieving functions to finish before moving on.
问题是我需要等待动画和数据检索功能完成后才能继续。 To aid me both the animation and AJAX methods in jQuery allow me to send along a callback.
为了帮助我,jQuery中的animation和AJAX方法都允许我发送回调。 But here's where I get lost.
但是,这是我迷路的地方。
What I want it to do is the following: 我要执行的操作如下:
The ideal thing would be if I could set up this sequence/chain of events in one single place, for example inside an event handler. 理想的事情是,如果我可以在一个地方(例如在事件处理程序中)设置事件的顺序/事件链。 If I want to call the functions in a different order or not call all of them I would just set up a different sequence/chain.
如果我想以不同的顺序调用函数或不调用所有函数,则只需设置不同的序列/链。 An example could be:
例如:
This means that I'd have to be in control over the callbacks in each step. 这意味着我必须在每个步骤中都控制回调。
I hope you understand what I'm looking for. 希望您了解我在寻找什么。 I want to control the entire execution sequence from a single function.
我想从一个函数控制整个执行顺序。 This function would be "the conductor of the orchestra" and all the other functions would be the different instrument sections of the orchestra.
该功能将是“管弦乐队的指挥”,所有其他功能将是管弦乐队的不同乐器部分。 This conductor functions need's ears so it can hear when the violinist is finished with her solo and can tell the horns to start playing.
该指挥的功能是需要的耳朵,因此可以听到小提琴手独奏结束时的声音,并且可以告诉号角开始演奏。 Excuse me for the corny allegory, but I hopes it makes it easier to understand what I want to do.
对我的老土寓言表示歉意,但我希望它可以使我更容易理解我想做什么。
Thanks in advance! 提前致谢! /Thomas
/托马斯
jQuery .queue()函数对您有帮助吗?
Could you store a sequencer variable that is an array (which you would be able to change) and then call a sequencer at the end of each function? 您能否存储一个序列变量(该变量是一个数组(可以更改)),然后在每个函数的末尾调用一个序列发生器?
You could then pass a step code through each function and cross-reference that with the sequencer variable as to what the next step should be. 然后,您可以通过每个函数传递一个步骤代码,并将其与sequencer变量进行交叉引用,以决定下一步是什么。
Pseudo Code: 伪代码:
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]
}
I tried executing this code: 我尝试执行以下代码:
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);
But the result (in Firebug) is: 但是结果(在Firebug中)是:
Executing function 1
func[seq] is undefined
[Break on this error] func[seq].call();
I think that the problem is caused by context, but I'm not sure. 我认为问题是由上下文引起的,但我不确定。 JavaScript is sensitive to the context in which a function is called.
JavaScript对调用函数的上下文敏感。
/Thomas /托马斯
I found that what I was trying to achieve was slightly overkill for my purposes. 我发现我要达到的目的有些过分。 So I decided to go with a different approach.
因此,我决定采用另一种方法。 I can send one or more boolean variables as a parameters to a function and use them to decide whether to execute a second function or not.
我可以将一个或多个布尔变量作为参数发送给函数,并使用它们来决定是否执行第二个函数。 Here's an example:
这是一个例子:
$("#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
...
}
Not very fancy but easy to understand and control and sufficient for my needs at the moment. 不太花哨,但易于理解和控制,足以满足我目前的需求。
/Thomas /托马斯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.