Двойная асинхронная функция AJAX

Question

Итак, я пытаюсь написать сценарий javascript для динамической загрузки страниц на моем сайте без обновления страницы. В основном у меня есть функция, которая угасает содержимое div, загружает новый контент, переключает контент, а затем исчезает. Содержимое загружается с использованием асинхронного запроса AJAX, который при успешном вызове вызывает функцию, которая исчезает в содержимом. Fadein функция не должна работать до тех пор, пока не будут выполнены функции загрузки и функция fadeout. Я хочу, чтобы страница загружалась все время, когда контент затухает, но сейчас моя замирающая анимация замерзает. Я пробовал кучу разных способов понять это, но пока ничего не работает ...

Любые идеи?

Answer 1

Это всего лишь вопрос ожидания завершения двух событий и, когда они оба полны, принимают меры. См. my answer to this other question. В основном:

Имейте флаг для каждого события, изначально ошибочного. Подцепите два события, о которых идет речь (обратный вызов завершения анимации и успех 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(); 
    }) 

}