Задержка Ajax в JQuery

Question

У меня есть простая страница, где, нажав на кнопку, новые данные загружаются в DIV с помощью функции ajax. Это DIV исчезает, когда пользователь нажимает на другую кнопку, данные загружаются и DIV снова исчезает. проблема в том, когда пользователь нажимает кнопку DIV, исчезает, но с уже загруженными новыми данными.

Я попытался использовать обратный вызов в функции FadeOut для предотвращения загрузки новых данных до исчезновения, но это не помогло. мой код, как показано ниже:

эффект выцветания с обратным вызовом:

$("#core").fadeOut(500, processingPages.loadPage(clickedButton)); 

loadPage функция:

loadPage: function(bottomMenu) { 
      $("#indicator").show(); 
      $.ajax({url: bottomMenu.attr('href'), 
      dataType: 'html', 
      timeout: 5000, // 5 seconds 
      success: function(html) { 
      $("#indicator").hide(); 
      $("#core").html(html).fadeIn(500); 
         } 
        } 

Что я делаю неправильно? Почему Fade out не ждет 500 мс и не запускает функцию loadpage. почему функция Ajax срабатывает сразу?

Answer 1

попробовать:

$("#core").fadeOut(500, function(){ 
    processingPages.loadPage(clickedButton); 
}); 

Answer 2

$("#core").fadeOut(500, function() { 
    processingPages.loadPage(clickedButton)); 
}); 

Это распространенная ошибка. Вы хотите передать функцию, но на самом деле вы передаете возвращаемое значение функции, потому что вы выполняете немедленно, а не запрашиваете ее выполнение позднее.

В моей, я передаю анонимную функцию (не возвращаемое значение функции), которая, когда выполняется (то есть после выцветания), делает ваш код.

Это различие между ссылкой функции и вызовом функции.

alert //reference to alert function 
alert('hello'); //invocation of alert function 

Answer 3

Использовать обещания. Сохраняет вещи очень просто.

var fadingOut = $("#core").fadeOut(500).promise() 

fadingOut.done(function() { 
    processingPages.loadPage(clickedButton) 
}); 

Хотя это простой пример, воспользуйтесь этой привычкой, и все будет намного легче для вас.

Вы даже можете использовать обещания с помощью ajax, jquery ajax calls возвращает обещания по умолчанию. Функция loadPage может выглядеть примерно так:

loadPage: function(bottomMenu) { 
    $("#indicator").show(); 
    var gettingData = $.ajax({url: bottomMenu.attr('href'), 
     dataType: 'html', 
     timeout: 5000 
    }); 

    gettingData.done(function(html) { 
     $("#indicator").hide(); 
     $("#core").html(html).fadeIn(500); 
    }); 

    gettingData.fail(function() {alert("There was a problem loading your data";}); 
}