jQuery callbacks messing with variable scopes and functions?

Question

Good morning people - I've been having this problem for hours and I can't isolate it.

I have this piece of jQueryzed JavaScript:

jQuery(document).ready(function() {
    var validated = 1;

    jQuery('#help_continue').click(function() {
        jQuery('#step' + validated + ', #step' + validated + '_help').fadeOut(200, function() {
            jQuery('#step' + validated + '_help').removeClass('visible').find('.visible').removeClass('visible');
            jQuery('#step' + (validated + 1) + '_help').addClass('visible');
            jQuery('#step' + (validated + 1) + '_help div:first').addClass('visible').css({display: 'block'});
            jQuery('#step' + (validated + 1) + ', #step' + (validated + 1) + '_help').fadeIn(200);
        });
    });
});

All good, nothing too fancy. If bound to HTML, it works as expected.

The thing is that, when I add this to the mix:

jQuery(document).ready(function() {
    var validated = 1;

    jQuery('#help_continue').click(function() { 
        jQuery('#step' + validated + ', #step' + validated + '_help').fadeOut(200, function() {
            jQuery('#step' + validated + '_help').removeClass('visible').find('.visible').removeClass('visible');
            jQuery('#step' + (validated + 1) + '_help').addClass('visible');
            jQuery('#step' + (validated + 1) + '_help div:first').addClass('visible').css({display: 'block'});
            jQuery('#step' + (validated + 1) + ', #step' + (validated + 1) + '_help').fadeIn(200); alert(validated); // this...
        });
        validated++; // ...and this.
    });
});

The alert it shown TWICE, and the "validated" variable is NEVER = 1 inside the function - always 2.

I'm no JavaScript guru for sure, but I definitely know that that's just plain wrong, unless I'm missing something. I come from a PHP background, and I know that JavaScript has its idiosyncrasies, but this is just weird.

I'm using jQuery 1.5 if it matters. Anyone knows what's happening?

Felix Kling · Accepted Answer · 2011-02-12 07:07:48Z

1

The code you pass as callback to fadeOut is only executed after ~200ms timeout. But the the code is not blocking. I.e. everything inside the click handler, also statements after the call to fadeOut, is executed immediately.

jQuery('#help_continue').click(function() {
    // first 
    jQuery('....').fadeOut(200, function() {
        // second
    });
    validated++; // first
});

But this should not show the alert twice... anyway, if you want to increment validate on click, but it should have the the correct value when the fadeOut callback is called, you can do so with an immediate function:

jQuery('#help_continue').click(function() {       
    (function(validated) {
        jQuery('....').fadeOut(200, function() {
            // ...
        });
    }(validated));
    validated++;
});

edited Feb 12, 2011 at 7:07

answered Feb 12, 2011 at 6:38

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

AeroCross Over a year ago

Are you saying that validated++ is being executed at the same time that the click handler is triggered and not after the animation is done? Also, I don't know what's happening with the alert - I tried setting the validated++ after the fadeIn, but still nothing.

AeroCross Over a year ago

If I set validated++ after the fadeIn and the alert outside the callback, I click twice and I get 1 and 3. If I put the alert after the fadeIn, then validated++ after the fadeIn in the callback, with one click, I get 1 and 2... It's behaving weird...

Felix Kling Over a year ago

@AeroCross: Just put everything what should be executed after the element was faded out, in the callback. That is what the callback is for.

AeroCross Over a year ago

Nope - nothing. The expected behavior is that every time I fire up the click handler, validation goes up by 1. If I put it inside the callback, it adds up twice (1 click = 3) and then it stops moving up. Inside the callback it has a different behavior. I even tried setting up window.validation to prevent scoping problems, but still nothing.

AeroCross Over a year ago

After seeing your edition, I went back to Coda and tried again - for some weird reason it worked perfectly, but I didn't understand at all what just happened. Could you explain a bit what was going on in there? Perhaps telling me how's that technique called so I can do further research? I am very grateful!

|

Collectives™ on Stack Overflow

jQuery callbacks messing with variable scopes and functions?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related