Prevent second execution until the first ends in jquery

Question

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

What type of element is myID? Also, can you include all the code instead of trying to summarize it in a comment? — JohnFx, Jan 27 '12 at 17:40

Jasper · Answer 1 · 2012-01-27T17:51:52.940

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.

score 1 · Accepted Answer · answered Jan 27 '12 at 17:44

1

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

answered Jan 27 '12 at 17:44

Lefsler

1,738
6
26
46

Works, thanks man, the solution was very simple, but i'm hours in it and don't fix the problem, very thank you! – evandrobm Jan 27 '12 at 17:49

score 0 · Answer 3 · edited May 23 '17 at 12:15

0

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

edited May 23 '17 at 12:15

Community

1
1

answered Jan 27 '12 at 17:42

JohnFx

34,542
18
104
162

Here's an blog post describing how to use getJSON synchronously: http://www.nurelm.com/themanual/2010/08/09/self-indulgent-code-jquery-getjson-with-error-handling/ – JohnFx Jan 27 '12 at 17:46
3

I suggest NOT doing a synchronous AJAX call. It'll lock up the browser until it's done. – gen_Eric Jan 27 '12 at 17:47
I agree that it's a bad idea. Just trying to throw an option out there. – JohnFx Jan 27 '12 at 17:49

score 0 · Answer 4 · answered Jan 27 '12 at 17:48

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

score 0 · Answer 5 · answered Jan 27 '12 at 17:52

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

Prevent second execution until the first ends in jquery

5 Answers5