Question

这是我在按钮上的.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> - 容器，通过$(box).load(url)...加载 * .php 页面，其中 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 { });范围内的所有内容，或者我不正确？< / p>

在使用.load(url)显示$(box)之前等待.slideDown()来电完成的正确方法是什么？

Answer 1

$.load不支持promises，所以你只需要将回调函数作为参数传递：

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

Answer 2

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

Answer 3

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

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

为：

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

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

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

您的代码中的其他实例也是如此，您需要多次包装vars ...

jQuery / AJAX - 将内容加载到模态窗口，如何等到load（）完成？

3 个答案: