0

这是我从.click(function { loadBox(url); });按钮上调用的函数：

var loadBox = function(url) {
    var mask = $('#mask');
    var box = $('#box');
    $(mask).fadeTo(600, 0.8).promise().done(function() {
        var winH = $(window).height();
        var winW = $(window).width();
        var boxH = winH * 0.6;
        var boxW = winW * 0.8;

        $(box).css({
            width: boxW + 'px',
            height: boxH + 'px',
            top: ((winH - boxH) / 2) + 'px',
            left: ((winW - boxW) / 2) + 'px'
        });

        $(box).load(url).promise().done(function () {
            $(box).slideDown(300);
        });

        $(mask).click(function() {
            if($(':animated').length)
                return false;
            $(this).hide();
            $(box).hide();
        });
    });
}

#mask/$(mask)是一个<div>仅用作叠加层的容器， #box/$(box)是另一个<div>加载*.php页面的容器，$(box).load(url)...其中url类似于/pages/player.php?match_id=1&player_id=15.

到目前为止，它似乎正在起作用，只有一件小事让我感到不安，关于：

$(box).load(url).promise().done(function () {
    $(box).slideDown(300);
});

我有一张桌子，里面有不同的球员，当你点击一个球员的名字#box时，屏幕中央会弹出一个球员的名字，里面有player.php那个球员的持有信息。

但是如果#box之前加载了一些其他玩家的信息，框将首先显示 ( $(box).slideDown(300);)，然后它的内容会发生变化 - 所以在加载新信息之前，您会看到其他玩家的信息大约半秒。

我以为<function>.promise().done(...会等到<function>- 在我的情况下.load(url)完成，然后才执行.done(function { });范围内的所有内容，还是我不正确？

在显示using之前等到.load(url)呼叫完成的正确方法是什么？$(box).slideDown()

4

3 回答 3

1

$.load不支持承诺，因此您只需将回调函数作为参数传递：

$(box).load(url, function () {
    $(box).slideDown(300);
});
于 2013-08-04T02:09:49.527 回答
1

您不需要promise().done()，只需将回调作为load()的第二个参数。

于 2013-08-04T02:10:26.330 回答
1

在这种情况下，您应该使用回调函数。当.load完成其任务时，它将触发回调。所以，你应该改变：

$(box).load(url).promise().done(function () {
    $(box).slideDown(300);
});

至：

$(box).load(url, function () {
    $(box).slideDown(300);
});

此外，您不需要继续包装boxjQuery 方法。这违背了将它们缓存在脚本顶部的变量中的目的。所以真的，它应该是：

box.load(url, function () {
    box.slideDown(300);
});

同样适用于代码中多次包装 var 的其他实例......

于 2013-08-04T02:11:26.190 回答