jquery - 暂停 jquery 函数以等待 ajax 内容加载，然后再继续

Question

我有一个脚本，它根据用户点击的链接将一些 html 加载到 div 中。我正在尝试为此事件创建交叉淡入淡出类型的动画。这是我正在使用的代码:

var loadInit = $('.thumbs a:first').attr("href");        
$('#loadTarget').load(loadInit);

$('.thumbs a').click(function(){
    var toLoad = $(this).attr('href');
    $('#loadTarget').hide('slow',loadContent);

    function loadContent() {
        $('#loadTarget').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#loadTarget').show('slow');
    }
    return false;
});

我想要做的是暂停脚本，直到 loadContent 函数完全加载与其关联的 html 和图像。当第一个内容被隐藏并加载新内容时，我收到了这个恼人的闪光。有什么想法吗？？

Answer 1

jQuery load 有一个回调函数，在加载完成时调用:

$('#loadTarget').load(loadInit, function(response) {
    alert('complete!  Returned: ' + response);
});

http://api.jquery.com/load/

添加:

function loadContent() {
$('#loadTarget').load(toLoad,'',showNewContent()) //Wrong.
}

当您调用 showNewContent() 时，会立即执行。相反，您想要做的是通过排除 () 来传递指向函数的指针。

function loadContent() {
$('#loadTarget').load(toLoad, showNewContent) //Right :)
}

这就是您立即调用 showNewContent 时导致闪烁的原因。