如何在導航到其他頁面之前確保函數完全執行？

Question

我正在使用web服務刪除某些記錄。 jquery ajax請求是在超鏈接的onclick中寫入的。當我執行腳本時，使用螢火蟲一行一行，它被刪除，否則它不是。有人遇到過這種情況嗎？請幫助

代碼示例：

$(".target").click(function() { 
      func(); //This function should be executed completely before navigating to another page 
     }); 


var func = function() { 
      var items = $("#flag").find('td input.itemClass'); 
      id = items[0].value; 
      var status = items[1].value; 
      var type = items[2].value; 
      var params = '{' + 
          'ID:"' + id + '" ,Type:"' + type + '" ,Status:"' + status + '"}'; 
      $.ajax({ 
       type: "POST", 
       url: "WebMethodService.asmx/DeleteItem", 
       data: params, 
       //contentType: "plain/text", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function(msg) { 
        $("#deleteNotificationMessage").val("Item has been removed"); // keep a separate label to display this message 
       } 

       //Event that'll be fired on Success 

      }); 


    } 

Answer 1

jQuery的Ajax函數返回延期對象，因此，我們return $.ajax。那麼你應該使用延期。 done在AJAX完全結束時執行回調。當AJAX爲done，導航離去使用JS來代替：

var func = function() { 
    ... 
    return $.ajax({...});     //return our ajax deferred 
} 

$(".target").click(function() { 
    var target = this;      //preserve "this" since this in the callback may be different 
    func().done(function(){     //our done callback executed when ajax is done 
     window.location.href = target.href; //assuming .target is a link 
    }); 
    return false;       //prevent the natural click action 
}); 

Answer 2

您可以在Ajax調用是等在那裏完成呼叫使用async: false。

var func = function() { 
      var items = $("#flag").find('td input.itemClass'); 
      id = items[0].value; 
      var status = items[1].value; 
      var type = items[2].value; 
      var params = '{' + 
          'ID:"' + id + '" ,Type:"' + type + '" ,Status:"' + status + '"}'; 
      $.ajax({ 
       type: "POST", 
       async: false, 
       url: "WebMethodService.asmx/DeleteItem", 
       data: params, 
       //contentType: "plain/text", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function(msg) { 
        $("#deleteNotificationMessage").val("Item has been removed"); // keep a separate label to display this message 
       } 

       //Event that'll be fired on Success 

      }); 
    } 

替代方案，您可以在請求後提交。

$(".target").click(function() { 
      func(); //This function should be executed completely before navigating to another page 
      return false; 
     }); 

var func = function() { 
      var items = $("#flag").find('td input.itemClass'); 
      id = items[0].value; 
      var status = items[1].value; 
      var type = items[2].value; 
      var params = '{' + 
          'ID:"' + id + '" ,Type:"' + type + '" ,Status:"' + status + '"}'; 
      $.ajax({ 
       type: "POST", 
       async: true, 
       url: "WebMethodService.asmx/DeleteItem", 
       data: params, 
       //contentType: "plain/text", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function(msg) { 
        $("#deleteNotificationMessage").val("Item has been removed"); // keep a separate label to display this message 
        $("#YourFormID").submit(); 
       } 

       //Event that'll be fired on Success 

      }); 

    } 

Answer 3

只需將事件移動到 「成功」 處理程序在你的Ajax請求：

$.ajax({ 
      type: "POST", 
      url: "WebMethodService.asmx/DeleteItem", 
      data: params, 
      //contentType: "plain/text", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function(msg) { 
       $("#deleteNotificationMessage").val("Item has been removed"); 
       //Event that'll be fired on Success 
      }    

     }); 

或者使用jQuery AJAX回調方法。