jQuery ajaxコール後のコールバック関数

Question

私は、RESTエンドポイントへのjQuery ajaxコールを作成する関数を持っています。この機能は、異なるエンドポイントで5〜6回実行され、検証するデータを収集します。この間、ブラウザ画面にスピナーを表示して、プログラムが処理中であることをエンドユーザーに知らせたいと思います。私は一度完了したらスピナーを隠したいと思います。私はこれをどのように機能させるかを考え出すのに苦労しています。私の考えは単純なコールバック関数になります。私はclickメソッドとcssメソッドにコールバック関数を入れてみました。また、ajax呼び出し（validateAcctStr）で直接呼び出せましたが、これらのどれも動作していないようです。シンプルなものがあるような気がする？

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

あなたが所定の位置に、ほぼすべての部分を持っているだけでものを入れてあります。

$(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リストからデータを引き出し）のためにしたものです正しい順序。

問題は、disableSpinner関数を決して呼び出さないことです。

他にもいくつか小さなことがあるので、コードを変更してみましょう。

だからあなた$（ドキュメント）.ready（）スタッフになったでしょう：

$(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. 
} 
}); 
} 

更新

コールバックのリストが完了するまで待たなければならない場合は、ちょっと複雑なアプローチを使用する必要があります。

約束を導入することもできますが、ほとんどすべてのコードを書き直す必要があります。

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

エラーハンドラ内で同じコード： あなたのケースでは、あなたはコールバックを使用する必要があります。