0

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

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

我想做的是这个列表，按照列出的顺序，在前一个完成之前不继续下一个项目：

  1. 隐藏#outside 元素。
  2. 将#inside 的内容设置为“foo”。
  3. 显示#outside 元素。

这样的事情可以用 jQuery 完成：

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

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

相反，我想做这样的事情：

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

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

请注意，此处显示的 HTML 与我实际使用的内容相比已大大简化，并且我希望对这些元素应用更长的操作链。

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

4

3 回答 3

3

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

$('#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();
    });
});

除非您不习惯使用延迟对象，否则没有任何内容难以阅读。它会产生少量代码，通过微妙的动画尽可能快地检索和显示内容。

如果你真的想让它“看起来更好”，你当然可以在函数后面抽象这个方法，但它最终可能会变得不那么可维护（我在哪里定义了那个函数？）

于 2012-12-11T20:37:11.630 回答
1

这个例子对你有用吗？

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

$(function(){
    $(selector).click(performTransition);
});
于 2012-12-11T20:36:15.887 回答
0

您可以使用.queue标准动画队列。它仍然很冗长，但至少没有嵌套。

$("#outside").queue(function() {
   $("#outside").hide('slow');
   $(this).dequeue();
});
$("#outside").queue(function() {
   $("#inside").html('bar');
   $(this).dequeue();
});
$("#outside").queue(function() {
   $("#outside").show();
   $(this).dequeue();
});
于 2012-12-11T20:47:31.340 回答