関数への約束のバインド

Question

私は関数に約束を追加しようとしていますので、関数が最初に完了するのを待つでしょう。 $.whenと.promise()を試してみました。また、.map関数が完了したときに変更されたカウンタと変数を追加しましたが、ifステートメントの前にxのinputSmartCheckとinputTNACheckを完了して変更するためにcheckInput()関数を取得できません実行します。このため、checkInput()がxの値を1に変更しても、if文が実行される前に実行され、trueが返されます。私はJavascript（私はjQueryを好む）と少し経験がありますが、私は先進的な分野に取り組んでいると思います。どんな助けもありがとう。

 $(document).on("click", ".updateNewRows", function(){ 
     $("#inputTNACheck").val("0"); //hidden inputs 
     $("#inputSmartCheck").val("0"); //hidden inputs 
     var x=0; 
     checkInput(); 
     if(x==0 && $("#inputTNACheck").val()=="0" && $("#inputSmartCheck").val()=="0"){ 
      $(".newStart").each(function() { 
       var get = $(this).closest(".newStart"); 
       var data = { 
        empID:get.find(".tna_id").val(), 
        smart:get.find(".smart_uname").val(), 
        first:get.find(".f_name").val(), 
        last:get.find(".l_name").val(), 
        date:get.find(".start_date").val(), 
        type:get.find(".type").val() 
       }; 
       $.post('new_user_process_bulk_create_records.php', data, function(data,textStatus) { 
        console.log(textStatus); 
        $("#newUsersTable").remove(); 
        $(".updateNewRows").remove(); 
        if ($("#returnUsersTable").html()) { 
         $("#newUsersRow").html('<div class="alert alert-success">Updated</div>'); 
        } 
        else{ 
         location.reload(); 
        } 

       }); 
      }); 
     } 
    }); 



    function checkInput(){ 
     $('.newStart').map(function() {  

      var get = $(this).closest(".newStart"); 

      var id = get.find(".tna_id"); 
      var smart = get.find(".smart_uname"); 
      var first = get.find(".f_name"); 
      var last = get.find(".l_name"); 
      var type = get.find(".type"); 
      var smartCheck = $.ajax({ 
       url: "new_user_validate_bulk_upload.php", 
       type: "POST", 
       data: {smart:smart.val(), type:'smart'}, 
       success: function(data) { 
        if(data!="ok"){ 
         $("#inputSmartCheck").val("1"); 
         smart.css('background-color', 'pink'); 
        } 
        else{smart.css('background-color', 'white');} 
       } 
      }); 

      var tnaCheck = $.ajax({ 
       url: "new_user_validate_bulk_upload.php", 
       type: "POST", 
       data: {tna:id.val(), type:'tna'}, 
       success: function(data) { 
        if(data!="ok"){ 
         $("#inputTNACheck").val("1"); 
         id.css('background-color', 'pink'); 
        } 
        else{id.css('background-color', 'white');} 
       } 
      }); 
      $.when(smartCheck, tnaCheck).then(function() { 

       var name = new RegExp('^[a-zA-Z-]{0,20}$'); 
       var smartID = new RegExp('^[a-zA-Z0-9]{0,10}$'); 
       var empID = new RegExp('^[0-9]{0,10}$'); 

       if (!name.test(first.val()) || first.val()=='') { 
        x=1; 
        first.css('border', '1px solid red'); 
       }else{first.css('border', '1px solid #CCC');} 

       if (!name.test(last.val()) || last.val()=='') { 
        x=1; 
        last.css('border', '1px solid red'); 
       }else{last.css('border', '1px solid #CCC');} 

       if(!smartID.test(smart.val()) || smart.val()==''){ 
        x=1; 
        smart.css('border', '1px solid red'); 
       }else{smart.css('border', '1px solid #CCC');} 

       if(!empID.test(id.val()) || id.val()==''){ 
        x=1; 
        id.css('border', '1px solid red'); 
       }else{id.css('border', '1px solid #CCC');} 

       if(type.val()==''){ 
        x=1; 
        type.css('border', '1px solid red'); 
       }else{type.css('border', '1px solid #CCC');} 
      });//$.when close 
     }); 
    } 

Answer 1

最初のいくつかの基本...

私は、完了し、

xがあなたのイベントハンドラ内で定義されたxの値を変更するcheckInput（）関数を取得することはできませんcheckInputs()であるにもかかわらず、イベントハンドラでという名前を参照すると、イベントハンドラunleのスコープで定義されている変数にアクセスできませんssのcheckInputs関数も、そのイベントハンドラで定義されます。 （私はこのケースでは、それはあなたが機能を作成しているわけでしょうお勧めしないだろうとするたびにイベントハンドラは大したことではなく、実行されますが、不必要にもかかわらず。）

文は

を実行した場合の前に

checkInputs()は非同期のものなので、完了したかどうかを判断するために何もせずに単に呼び出すことに頼ることはできません。良いニュースは、あなたが約束で正しい道にいるということです。

現在、checkInputsの方法では、ifの前にすべての非同期の処理が完了しているかどうかはわかりません。 checkInputs関数に基づいたサンプルコードを使って、それを試してみましょう。

function checkInputs() { 
    // an array to store the async calls 
    var asyncCalls = []; 

    // iterate over all the things 
    // changed to .each() because "each" is for iterating, 
    // and "map" is for returning a new array 
    $('.newStart').each(function() { 
     // get all your variables and stuff 
     var smartCheck = $.ajax({...}); 

     var tnaCheck = $.ajax({...}); 

     var asyncCallsPromise = $.when(smartCheck, tnaCheck).then(function() { 
      // do stuff 

      console.log(arguments); 
     }); 
     asyncCalls.push(asyncCallsPromise); 
    }); 

    // the important part, return a promise so you can check 
    // when checkInputs has processed all the things 
    return $.when.apply($, asyncCalls); 
} 

// somewhere else... 
checkInputs().then(function() { 
    console.log('all the calls are done'); 
    // here you can do the things that need to happen after checking the inputs 
    // e.g. the if statement. 
}); 

は右方向に、この少し突き出すが

を役に立てば幸い