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

Question

Is there any way to check if the event is completed and element is free to perform another action? Like I want to do

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

I don't want to send ajax call in second onclick as it is already been sent, just want to check if it is done with ajax then do this

Answer 1

You can introduce a helper variable:

// 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  
    }
});

EDIT: I just noticed that you have event handlers attached to the same button. In that case my initial answer would not work, because first event hander would be executed every time you click the button.

It is not very clear from the description what you want to do with your first event hander. I assume you want to use some data, and if you already have this data, then you use it immediately (like in second handler), if you don't have it - you make the AJAX call to get the data (like in first handler).

For such scenario you could use single event handler with some conditions:

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

You should be able to provide handlers for AJAX return codes. eg

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

Answer 3

you can disable the button as soon as it enters in to the event and enable it back in ajax success or error method

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

Answer 4

This is edited, more complete version of dotnetums's answer, which looks like will only work once..

// 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

You just need to set a flag that indicates ajax call is underway, then clear it when ajax call returns.

 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

What you can do is call a function at the end of an if statement like

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

function checkDone() {

   alert("Done");

}