Javascript-如何檢查此事件是否已完成

Question

有什么方法可以檢查事件是否完成，元素是否可以執行其他操作？ 就像我想做的

    $('#button-cancel').on('click', function() {
      // send ajax call
    });
    /****************************************
       extra code
    *******************************************/
$('#button-cancel').on('click', function() {
     if(ajax call is completed) {
       //do some thing  
    }
    });

我不想在第二次onclick發送ajax調用，因為它已經發送過，只想檢查它是否已用ajax完成，然后執行此操作

Answer 1

您可以引入一個輔助變量：

// introduce variable
var wasAjaxRun = false;
$('#button-cancel').on('click', function() {

    // in ajax complete event you change the value of variable:
    $.ajax({
        url: "yoururl"
        // other parameters
    }).done(function() {
        // your other handling logic
        wasAjaxRun = true;
    });
});

$('#button-cancel').on('click', function() {
     if(wasAjaxRun === true) {
       //do some thing  
    }
});

編輯：我只是注意到您有事件處理程序附加到同一按鈕。 在這種情況下，我的初始答案將不起作用，因為每次單擊按鈕時都會執行第一事件處理程序。

從描述中不是很清楚您要如何處理第一個事件處理程序。 我假設您要使用一些數據，並且如果您已經有了這些數據，那么您可以立即使用它（例如在第二個處理程序中），如果您沒有它，則可以進行AJAX調用以獲取數據（例如在第一個處理程序中）處理程序）。

對於這種情況，您可以在某些條件下使用單個事件處理程序：

var isAjaxRunning = false;  // true only if AJAX call is in progress
var dataYouNeed;            // stores the data that you need

$('#button-cancel').on('click', function() {
    if(isAjaxRunning){
        return;    // if AJAX is in progress there is nothing we can do
    }

    // check if you already have the data, this assumes you data cannot be falsey
    if(dataYouNeed){  
        // You already have the data
        // perform the logic you had in your second event handler 
    }
    else {  // no data, you need to get it using AJAX
       isAjaxRunning = true;  // set the flag to prevent multiple AJAX calls
       $.ajax({
           url: "yoururl"
       }).done(function(result) {
           dataYouNeed = result;
       }).always(function(){
           isAjaxRunning = false;
       });
    }
});

Answer 2

您應該能夠提供AJAX返回代碼的處理程序。 例如

$.ajax({
type: "post", url: "/SomeController/SomeAction",
success: function (data, text) {
    //...
},
error: function (request, status, error) {
    alert(request.responseText);
}
});

Answer 3

您可以在按鈕進入事件后立即將其禁用，並以ajax成功或錯誤方法將其啟用

 $('#button-cancel').on('click', function() {
 // Disable button
 if(ajax call is completed) {
   //do some thing  
   //enable it back
}
});

Answer 4

這是經過編輯的dotnetums答案的更完整版本，看起來只能使用一次。

// introduce variable
var ajaxIsRunning = false;
$('#button').on('click', function() {

    // check state of variable, if running quit.
    if(ajaxIsRunning) return al("please wait, ajax is running..");
    // Else mark it to true
    ajaxIsRunning = true;

    // in ajax complete event you change the value of variable:
    $.ajax({
        url: "yoururl"
    }).done(function() {

        // Set it back to false so the button can be used again
        ajaxIsRunning = false;

    });
});

Answer 5

您只需要設置一個標志，表明正在進行ajax調用，然后在ajax調用返回時將其清除。

 var ajaxProcessing = false; $('#button-cancel').on('click', function(){ processAjaxCall(); }); function processAjaxCall() { if(ajaxProcessing) return; ajaxProcessing = true; //set the flag $.ajax({ url: 'http://stackoverflow.com/questions/36506931/javascript-how-to-check-if-operation-has-been-completed-on-this-event' }) .done(function(resp){ //do something alert('success'); }) .fail(function(){ //handle error alert('error'); }) .always(function(){ ajaxprocessing = false; //clear the flag }) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button-cancel">Cancel</button> 

Answer 6

您可以做的是在if語句的末尾調用一個函數，例如

if(ajax call is completed) {
       checkDone();  
}

function checkDone() {

   alert("Done");

}