Overlapping multiple setTimeouts inside jQuery

Question

new here and new to jQuery. I've searched for an answer to my question/ problem without success, so here I come. I'm having problems with this code:

<p>Hello.</p>
<p>Good bye.</p>
<p>Ciao!</p>
<script>
jQuery('p').mouseover(
    function() {
        jQuery(this).css({backgroundColor:'red'});
    }
);
jQuery('p').mouseout(
    function() {
        myElement = jQuery(this);
        setTimeout(function(){
            color = ['red','green','blue','orange'];
            myElement.css({backgroundColor:color[Math.round(Math.random()*3)]});
        }, 1000
        )
    }
);
</script>

The thing is that if we move the cursor over a new paragraph before the last setTimeout function has been executed, then both the first and the second setTimeout functions will act upon the last affected paragraph. For example:

a) Move the cursor over/out a paragraph. Before the setTimeout function associated with the mouseout event is executed,

b) move the cursor over/out a different paragraph. Now the setTimeout function

myElement.css({backgroundColor:color[Math.round(Math.random()*3)]});

will select TWICE consecutively a background color for the second paragraph, and none for the first one. I've tried to associate two different vars (myElementOne and myElementTwo) with the jQuery(this) value to no avail. I would appreciate greatly some help. Thanks.

Yon can use the hover() method: jsbin.com/eciqiw/edit#javascript,html,live — Roko C. Buljan
– Roko C. Buljan, Commented Jun 18, 2012 at 22:27

dvir · Accepted Answer · 2012-06-18 22:20:40Z

1

The problem is that your myElement variable is defined in the global scope, and each mouseout execution overwrites the previous value of it.

If you defined myElement with var myElement = jQuery(this);, myElement will be defined only in the scope of the current mouseout event - and will affect only that element in the timeout callback.

answered Jun 18, 2012 at 22:20

dvir

5,1241 gold badge25 silver badges32 bronze badges

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

1 Comment

metaedro Over a year ago

Well, of course you're right. This is the first time I post in this site and really I don't know if it is considered of good or bad tone to reply just to say thanks, but well, thanks. I really appreciate your help :)

Tina CG Hoehr · Accepted Answer · 2012-06-18 22:21:04Z

0

The way I see it, myElement becomes global and only refers to one div at any time. Add var in front of it to make it refer to the particular this in time.

jQuery('p').mouseout(
    function() {
        var myElement = jQuery(this);
        ...

Demo

answered Jun 18, 2012 at 22:21

Tina CG Hoehr

6,7666 gold badges46 silver badges57 bronze badges

Collectives™ on Stack Overflow

Overlapping multiple setTimeouts inside jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related