jQuery ajax調用後的回調函數

Question

我有一個函數可以調用一個jQuery ajax調用REST端點。此功能將在不同端點運行5-6次以收集數據以進行驗證。在此期間，我想在瀏覽器屏幕上顯示一個微調器，以向最終用戶指示該程序正在處理中。我想在完成後隱藏微調器。我正在努力弄清楚如何使這個工作。我的想法是一個簡單的回調函數。我試着將回調函數放在click方法和css方法中，以及直接在ajax調用（validateAcctStr）中，這些都不起作用。我覺得我缺少一些簡單的東西？

$(document).ready(function(){ 
$("#submit").click(function(disableSpinner){ 
    $("#json-overlay").css("display", "block"); 
    validateAcctStr("ValidationAccount", "#accountTxt", "#acctValid"); 
    validateAcctStr("ValidationBusiness", "#businessTxt", "#busValid"); 
}); 
    function disableSpinner(){ 
     $("#json-overlay").css("display", "none"); 
     alert("test"); 
    } 
}); 

這是我到目前爲止有我的AJAX調用（它從一個SharePoint列表中提取數據）：

function validateAcctStr(list, inputField, validationField) 
{ 
$.ajax({ 
    url: "https://urlAddress/_api/web/lists/getbytitle('"+list+"')/items?$orderby=Title asc&$top=4999", 
    type: "GET", 
    dataType: "json", 
    headers: { 
     Accept: "application/json;odata=verbose" 
    }, 
success: function(data){ 
    $.each(data.d.results, function(index, item){ 
      var arrayVar = $(inputField).val(); 
      if(item.Title === arrayVar){ 
       $(validationField).html("Valid").css({"background-color": "green", "color": "white", "text-align": "center"});     
       return false; 
      } else { 
       $(validationField).html("Invalid").css({"background-color": "red", "color": "white", "text-align": "center"}); 
      } 
     }); 
    } 
}); 
} 

Answer 1

你必須到位，幾乎所有的作品，只是必須把東西正確的順序。

問題是，你永遠不會調用disableSpinner函數。

正如你還有其他一些小事情，我會告訴你改變你的代碼。

所以你$（文件）。就緒（）工作人員將成爲：

$(document).ready(function(){ 
    $("#submit").click(function(ev){ 
     activeSpinner(); 
     validateAcctStr("ValidationAccount", "#accountTxt", "#acctValid"); 
     validateAcctStr("ValidationBusiness", "#businessTxt", "#busValid"); 
    }); 
}); 

當你有其他的javascript代碼：

// You worked well wrapping the code to disable the spinner in a function 
// let's do it for the activation too. 
function activeSpinner() { 
    $("#json-overlay").css("display", "block"); 
} 

function disableSpinner() { 
    $("#json-overlay").css("display", "none"); 
    // this is just for test: 
    // alert("test"); 
} 

而Ajax調用：

function validateAcctStr(list, inputField, validationField) { 
$.ajax({ 
    url: "https://urlAddress/_api/web/lists/getbytitle('"+list+"')/items?$orderby=Title asc&$top=4999", 
    type: "GET", 
    dataType: "json", 
    headers: { 
     Accept: "application/json;odata=verbose" 
    }, 
success: function(data){ 
    disableSpinner(); // As the first task you have to disable the spinner. 
    $.each(data.d.results, function(index, item){ 
      var arrayVar = $(inputField).val(); 
      if(item.Title === arrayVar){ 
       $(validationField).html("Valid").css({"background-color": "green", "color": "white", "text-align": "center"});     
       return false; 
      } else { 
       $(validationField).html("Invalid").css({"background-color": "red", "color": "white", "text-align": "center"}); 
      } 
     }); 
    }, 
error: function(err) { 
    disableSpinner(); // to avoid spinner active on an error 
    // do something with the error. 
} 
}); 
} 

UPDATE

如果您需要等待回調列表完成，那麼您應該使用稍微複雜的方法。

你可以引入承諾，但你必須重寫幾乎所有的代碼。 你的情況，你應該使用回調：

function callbackCounter() { 
    var count = 0; 
    return { 
     set: function (n) { 
      count = n; 
     }, 
     incr: function() { 
      cont++; 
     }, 
     done: function() { 
      count--; 
     }, 
     doneAll: function() { 
      count = 0; 
     }, 
     isDone: function() { 
      return count === 0; 
     } 
    } 
} 

// ... 
$("#submit").click(function(ev){ 
    activeSpinner(); 
    var countCallbacks = callbackCounter(); 
    countCallbacks.set(2); 
    validateAcctStr("ValidationAccount", "#accountTxt", "#acctValid", countCallbacks); 
    validateAcctStr("ValidationBusiness", "#businessTxt", "#busValid", countCallbacks); 
}); 

function validateAcctStr(list, inputField, validationField, countCallbacks) { 

// snipp... 
success: function(data){ 
    // here you decrement the callbacks: 
    countCallbacks.done(); 
    if (countCallbacks.isDone()) disableSpinner(); // As the first task you have to disable the spinner. 
}, 

在錯誤處理程序相同的代碼。