切換裝載機Ajax調用

Question

我對做一個Ajax調用此代碼：

$.post($form.attr('action'), $form.serialize(), 'json').done(function (data, textStatus, jqXHR) { 
    // Some logic here for done callback 

    // Redirect to another URL after 5 seconds 
    window.setTimeout(function() { 
     window.location = data.redirect_to; 
    }, 5000); 
}).fail(function() { 
    // Some logic here for fail callback 
}) 

該代碼工作正常。現在我需要給這個Ajax調用附加一個「loader」。我知道我可以在jQuery 1.8+文檔暴露的重視這$(document)（也發現了同樣的this話題），所以我也做了以下內容：

$(function() { 
    // a bunch of logic here 
}).ajaxStart(function() { 
    $('#loaderModal').modal('show'); 
    $('#loaderModal').on('show.bs.modal', function (e) { 
     $('#loaderDiv').loader(); 
    }) 
}).ajaxStop(function() { 
    $('#loaderModal').modal('hide'); 
    $('#loaderModal').on('hidden.bs.modal', function (e) { 
     $('#loaderDiv').loader('destroy'); 
    }) 
}); 

並再次要求工作，但碰巧我有其他Ajax在頁面上調用（用於某些字段的驗證），每次運行時，加載器都顯示不正確，因爲我只需要附加上面顯示的代碼（第一段代碼）。我怎麼能做到這一點？

作爲第二部分，一個與此相關的帖子，一些關於done和fail回調的邏輯觸發Bootstrap Growl消息，正如你一定注意到了我使用其中程序包含了Twitter的引導模態分量，所以我擔心在調用done的回調時，第二次調用以某種方式運行加載程序塊的調用是甚至可能的？這些事件的執行速度有多快？

PS：如果你任何有更好的解決這個然後說，並提前

Answer 1

而不是使用全球的事件處理程序，顯示/隱藏像

當前Ajax請求

//show the loader before the request 
showLoader(); 
$.post($form.attr('action'), $form.serialize(), 'json').done(function (data, textStatus, jqXHR) { 
    // Some logic here for done callback 

    // Redirect to another URL after 5 seconds 
    window.setTimeout(function() { 
     window.location = data.redirect_to; 
    }, 5000); 
}).fail(function() { 
    // Some logic here for fail callback 
}).always(hideLoader) //hide the loader after the ajax request 

function showLoader() { 
    $('#loaderModal').modal('show'); 
    $('#loaderModal').on('show.bs.modal', function (e) { 
     $('#loaderDiv').loader(); 
    }) 
} 

function hideLoader() { 
    $('#loaderModal').modal('hide'); 
    $('#loaderModal').on('hidden.bs.modal', function (e) { 
     $('#loaderDiv').loader('destroy'); 
    }) 
} 

Answer 2

感謝爲什麼不把你的腳本加載到一個函數，所以你可以隨意給他們打電話？這樣它們就符合你的代碼的邏輯，而不是每次都運行。

function startLoad() { 
    .ajaxStart(function() { 
     $('#loaderModal').modal('show'); 
     $('#loaderModal').on('show.bs.modal', function (e) { 
      $('#loaderDiv').loader(); 
     }) 
    }) 
} 

function stopLoad() { 
    .ajaxStop(function() { 
     $('#loaderModal').modal('hide'); 
     $('#loaderModal').on('hidden.bs.modal', function (e) { 
      $('#loaderDiv').loader('destroy'); 
     }) 
    }); 
}