I have the following code...

$("#myID").click(function(){

    //do some ajax requisition here
    //make it appears in screen with a fadeIn(300)

});

#myID is an id of one tag

But i need that this function was not called again until the actual execution ends, i tried put many different code before e after the ments but with no success, if you can help me to prevent that second execution!

The fadeIn() don't hold the execution, the code after it was executed while the effect is occurring, can someone help me?

Thanks

I have the following code...

$("#myID").click(function(){

    //do some ajax requisition here
    //make it appears in screen with a fadeIn(300)

});

#myID is an id of one tag

But i need that this function was not called again until the actual execution ends, i tried put many different code before e after the ments but with no success, if you can help me to prevent that second execution!

The fadeIn() don't hold the execution, the code after it was executed while the effect is occurring, can someone help me?

Thanks

• javascript
• jquery

• What type of element is myID? Also, can you include all the code instead of trying to summarize it in a ment? – JohnFx Commented Jan 27, 2012 at 17:40

5 Answers 5

You can set a flag that stores the state of whether or not the AJAX function is running:

$(function () {

    //set flag to allow AJAX calls
    var AJAX_ok = true;

    //bind click event handler
    $("#myID").click(function(){

        //check if it is ok to run an AJAX request right now
        if (AJAX_ok === true) {

           //if we can run an AJAX request then set the AJAX_ok flag to false so another one does not start
           AJAX_ok = false;

           //make the AJAX call
           $.getJSON('<url>', function (data) {

                //now that the callback function has been called, the AJAX call is done, so we re-enable the AJAX_ok flag
                AJAX_ok = true;

                //make it appears in screen with a fadeIn(300)
                //if DATA is valid HTML then...
                $(data).css('display', 'none').appendTo('#some-container').fadeIn(300);
            });
        }
    });
});

This will only run one AJAX call from the #myID element's click event handler at a time.

Its possible to kill the previous ajax or you can create an boolean with running, when someone click you set it to true and you have an if(!running){ //do ajax }, on the callback of the ajax you set the running to false

Use a synchronous AJAX call (The default is asynchronous). See this question for details on how to do that.

There are probably 100 better ways, but...

$("#myID").click(function() {
    var is_running = $(this).data('running');

    if (!is_running)
        $(this).data('running', true);
    else
        return;

    /* Do stuff */

    $(this).data('running', false);
}

Use callbacks to ensure the order of execution.

$("#myID").click(function(){    
     $.ajax({
         url: 'whatever url you are calling',
         success: function(){
             alert('ajax done');   
             $('whatever "it" is').fadeIn(300, function(){
                 //code place here will not execute until after fade in
                 alert('fadeIn done');
             }
        }
     })
});