複数のajax投稿を防止する

Question

以下のajaxリクエストでは、複数のリクエストがサーバーに送信されています。どのように私はそれを防ぐことができます。

 $('#winnerEditModal').modal().promise().done(function() { 
       $('#updateWinnerBtn').click(function() { 
        debugger 
        var currentModal = $(this).closest('.modal'); 
        var postBody = {}; 
        var inputIds=currentModal.find('input').map(function(){return $(this).attr('id')}); 
        var inputVals=currentModal.find('input').map(function(){return $(this).val()}); 
        var id = currentModal.attr('winnerId'); 
        postBody.id = id; 
        _.each(inputIds, function (v, k) { 
         var key = inputIds[k]; 
         var val = inputVals[k]; 
         postBody[key] = val; 
        }); 

        editWinner(postBody).done(function (response) { 
         console.log(response) 
         if(response){ 
          $table.bootstrapTable('refresh'); 
          toastr.success('Winner is updated successfully'); 
         }else{ 
          toastr.error('Winner is not updated successfully. Check info again!!'); 
         } 
        }) 
       }); 
      }); 

これはajax投稿を呼び出す関数です。何がこの動作を引き起こし、どのように私はそれを防ぐことができます

var editWinner = function (postBody) { 
    return $.post({ 
     url: getCookie('digrectargetDomain') + 'api/winner/edit', 
     // type: 'POST', 
     contentType : 'application/json', 
     data : JSON.stringify(postBody), 
     beforeSend: function (xhr) { 
      xhr.setRequestHeader('Authorization', getCookie('digrectoken')); 
     } 
    }); 
} 

Answer 1

される問題は、モデルが約束解決さ（あなたのコードの参照最初の2行）ごとにクリックハンドラをバインドしていることです。

だけdoneコールバックの外にクリックハンドラを取得：

var isResolved = false; 
$('#updateWinnerBtn').click(function() { 
    if (!resolved) return; // <-- handle click only when resolved 
    debugger 
    // rest of the click handler ... 
    // ... 
}); 

$('#winnerEditModal').modal().promise().done(function() { 
    isResolved = true; // allow clicks to be handled 
});