Javascript 跨多个元素对jQuery事件/操作进行排队

我有一个带有以下标记的HTML文档：

<div id="outside">
<div id="warning">Some warning here</div>
<div id="inside"></div>
</div>

随着更多事件包含回调，这段代码变得更加混乱，并且变得不容易维护

相反，我想这样做：

$.sequence(
    function(){ $('#outside').hide(); },
    function(){ $('#inside').html('foo'); },
    function(){ $('#outside').show(); }
);

这段代码清楚地显示了流程的每个步骤，并允许轻松插入/删除任何步骤，因为它不需要嵌套的函数回调

请注意，这里显示的HTML与我实际使用的HTML相比已经大大简化，我希望应用于这些元素的操作链更长

---

通常，仅通过对同一jQuery元素的顺序方法调用就可以实现这一点，但使用的元素不同，不允许队列按顺序执行。我正在寻找一种对调用进行排序的方法，这种方法在读取时看起来很干净，可以处理任何元素。

这个示例对您有用吗

function performTransition(){
    $('#outside').hide();
    $('#inside').html('foo');
    $('#outside').show();
}

$(function(){
    $(selector).click(performTransition);
});

---

这个例子对你有用吗

function performTransition(){
    $('#outside').hide();
    $('#inside').html('foo');
    $('#outside').show();
}

$(function(){
    $(selector).click(performTransition);
});

---

在这个特定的例子中，它相对简单。您可以通过以下方式获得所需的结果：

$('#outside').hide();
$('#inside').html('foo');
$('#outside').show();

然而，如果您加入异步事件，这显然是行不通的。假设您想用ajax获得“foo”。这将是一种比较常见的方法

// request for content immediately
var req = $.get("myfile.php");
// fade out container
$("#outside").fadeOut(function(){

    // now that the container is faded out, we
    // bind to the done callback of the request
    // so that we can use the response and fadeIn the container
    // as soon as possible without causing an abrupt stop of the animation
    // if the request finishes early (it most likely will).
    req.done(function(response){
        $("#inside").html(response);
        $("#outside").fadeIn();
    });
});

除非您不习惯使用延迟对象，否则这些都不难理解。它会产生少量代码，通过微妙的动画尽可能快地检索和显示内容

---

当然，如果您真的想让函数“看起来更好”，您可以将此方法抽象到函数后面，但它最终可能会变得不易维护（我在哪里定义了该函数？

在这个特定示例中，它相对简单。您可以通过以下方式获得所需的结果：

$('#outside').hide();
$('#inside').html('foo');
$('#outside').show();

然而，如果您加入异步事件，这显然是行不通的。假设您想用ajax获得“foo”。这将是一种比较常见的方法

// request for content immediately
var req = $.get("myfile.php");
// fade out container
$("#outside").fadeOut(function(){

    // now that the container is faded out, we
    // bind to the done callback of the request
    // so that we can use the response and fadeIn the container
    // as soon as possible without causing an abrupt stop of the animation
    // if the request finishes early (it most likely will).
    req.done(function(response){
        $("#inside").html(response);
        $("#outside").fadeIn();
    });
});

除非您不习惯使用延迟对象，否则这些都不难理解。它会产生少量代码，通过微妙的动画尽可能快地检索和显示内容

---

当然，如果您真的想让函数“看起来更好”，您可以将此方法抽象到函数后面，但它可能最终会变得不易维护（我在哪里定义了该函数？

您可以使用标准动画队列使用

.queue

。它仍然相当冗长，但至少没有嵌套

$("#outside").queue(function() {
   $("#outside").hide('slow');
   $(this).dequeue();
});
$("#outside").queue(function() {
   $("#inside").html('bar');
   $(this).dequeue();
});
$("#outside").queue(function() {
   $("#outside").show();
   $(this).dequeue();
});

---

您可以使用标准动画队列使用

.queue

。它仍然相当冗长，但至少没有嵌套

$("#outside").queue(function() {
   $("#outside").hide('slow');
   $(this).dequeue();
});
$("#outside").queue(function() {
   $("#inside").html('bar');
   $(this).dequeue();
});
$("#outside").queue(function() {
   $("#outside").show();
   $(this).dequeue();
});

---

.hide（）

和

.show（）

是即时的，不需要回调。但是您可能正在寻找的

。hide（）

和

。show（）

是即时的，不需要回调。但可能你正在寻找一个给定的例子，是的。给定的例子，是的。确实。中间位用于模拟异步事件。我喜欢延迟对象的处理方式，但如果要发出多个请求，仍然会导致嵌套函数混乱，不是吗？不是，您只需将这两个请求组合成一个带有$.when的回调。提前执行两个请求，然后在（请求1、请求2）完成时使用

$.done（

而不是

req.done（

然后数据作为数组在参数中可用。事实上，中间的位是用来模拟异步事件的。我喜欢延迟对象的处理方式，但如果要发出多个请求，它仍然会导致嵌套函数混乱，否？否，您只需将这两个请求合并到一个带有$.when.Perform的回调中即可两个请求都在前面，然后使用

$.when（req1，req2）.done（

而不是

req.done（

该数据作为数组在参数中可用）。