javascript - 双异步 AJAX 函数

Question

所以我正在尝试编写一个 javascript 脚本来在我的网站上动态加载页面而不刷新页面。基本上我有一个函数可以淡出内容 div，加载新内​​容，切换内容，然后淡入。使用异步 AJAX 请求加载内容，成功时调用淡入内容的函数。淡入在加载函数和淡出函数都完成之前，函数不应运行。我希望页面在内容淡出的整个过程中都在加载，但现在我的淡出动画被冻结了。我已经尝试了很多不同的方法来解决这个问题，但到目前为止没有任何效果......

有任何想法吗？

Answer 1

这只是等待两个事件完成并在它们都完成时采取行动的问题。请参阅我对其他问题的回答。基本上：

每个事件都有一个标志，最初是错误的。挂钩有问题的两个事件（动画的完成回调和 ajax 成功）。每个事件设置它的标志并调用一个函数。该函数检查标志：如果两者都设置，它会做一些事情（在你的情况下，设置新内容）。请参阅链接以获取代码示例。

Answer 2

我有一个做类似事情的网站。滑出、替换内容、滑入的功能如下：

var loadAnAjaxArticle = function (url) {
    var removeParentArticle = function () {
        // I don't like doing this, but so far haven't found a
        // particularly elegant way to replace the article
        // when calling load(), only append it.
        $('article').first().html($('article').last().html());
    };

    var showArticle = function (response, status, xhr) {
        if (status == "error") {
            $('article').first().html('<h2>There was an error processing your request.</h2>');
            $('article').first().slideDown('slow');
        } else {
            removeParentArticle();
            $('article').first().slideDown('slow');
        }
    };

    var loadArticle = function () {
        $('article').first().load(url + ' article', showArticle);
    };

    $('article').first().slideUp('slow', loadArticle);
}

基本上，它调用.slideUp隐藏内容，提供对另一个函数的回调。该函数调用.load以刷新内容，提供对另一个函数的回调。 该函数对 DOM 进行了一些操作以使其看起来正确（它处于开发早期，我还没有使它更优雅），并调用.slideDown以再次显示内容。

在这种情况下这很容易做到，因为我使用的每个函数都接受一个回调。如果您使用的功能具有相同的功能，您应该能够以这种方式链接它们。

Answer 3

您只需要设置一个标志并让两个完成函数检查两个事件是否都已完成。无论哪个完成函数发现两者都已完成，都会触发下一个动作。

您没有向我们提供您的代码的任何细节，但总体思路如下：

function loadNewPage(args) {

    var fadeDone = false;
    var ajaxData;

    function processAjaxDataWhenReady() {
        // if both have completed, then process the ajaxData and start the fadeIn
        if (fadeDone && ajaxData) {
            // process the ajaxData here
            $("#myContent").fadeIn();
        }
    }

    // start the fadeOut
    $("#myContent").fadeOut(function() {
        fadeDone = true;
        processAjaxDataWhenReady();
    });

    // start the ajax call
    $.ajax({...}, function(data) {
        ajaxData = data;
        processAjaxDataWhenReady();
    })

}