如何等待一段时间然后更改变量？

Question

I have a little code using jquery and I want to wait like, 300ms and then change a variable. I tried setTimeout but it wouldn't work, it just made the variable change instantly.

setTimeout(animationWait = 0, 300);

(I defined animationWait earlier globally in the document) Basically what I'm trying to do is wait for a click to end before another click can be done. So i thought I'd set a variable and then wait 300ms,

$('#up-arrow').live('click', function(e) {  

    if(animationWait == 0) {
        animationWait = 1;
        .... /* Code */
    }
}

So I need to change the animationWait back to 0 again after a delay to run the code. I've tried a bunch of stuff but it's still not working, any ideas?

Answer 1

You are not using setTimeout quite right. It must be passed either a function name or an anonymous function.

//anonymous function
setTimeout( function() { animationWait = 0 }, 300);

//or give it a function name
function change() { animationWait = 0; }
setTimeout(change, 300);

Answer 2

The parameter what you pass should be an evaluation statement. For me this works fine:

var animationWait = -1;    //Initially set the value to -1
alert(animationWait);      //alert to see the value
setTimeout("animationWait = 0", 300);    //Setting the value to 0
setTimeout("alert(animationWait)", 400);  //Alert after 400 ms

Answer 3

Have you tried using jQuery function delay() ?

A standard use case would look something like this:

$('item').delay(300).delayedEffectFunction();

Where delayedEffectFunction() is a made-up function you want to be delayed.

Answer 4

The answer to your question as asked is that setTimeout() expects the first parameter to be a function reference - either the name of a function declared elsewhere or an anonymous function. (Or a string, but for several reasons using a string is almost always the wrong solution.) Your code as is simply executes the expression animationWait = 0 and passes the result of that expression (0) to setTimeout() .

So to execute your single line of code via setTimeout() I'd recommend wrapping it in an anonymous function and passing that function to setTimeout() :

setTimeout(function(){ animationWait = 0; }, 300);

However, if you are doing animation with jQuery its animation methods allow you to pass a callback function to be executed when the animation ends, so you can do this type of processing there rather than independently setting your own timeout. For example, if your animation was like this:

$("#someelement").animate({someproperty:"somevalue"},
                          300);

Then you could add a callback function that will be called after this animation completes:

$("#someelement").animate(({someproperty:"somevalue"},
                          300,
                          function(){ animationWait = 0; });

To my eye this is neater than a separate setTimeout() call, but also it is easier to maintain because the duration only has to be specified in one place rather than you having to sync your own timeout to the animation.

A similar syntax applies to other jQuery methods like .fadeIn() , .hide() , etc. See the .animate() doco for more information and examples.