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. 
}, 

在错误处理程序相同的代码。