Mouseenter and mouseleave race issue
<p>All, I know javascript runs in the single-thread mode. But I am not sure if there is the race issue which is common in multiple thread world in some situation. 
Say you have html structure </p>

<pre><code>&lt;div id='parent' class="parent container"&gt;
    &lt;div id="child1" class="child container"&gt;
       &lt;div id="child11" class="child container"&gt;
           &lt;!--maybe there are more nested divs with class 'container' --&gt;
       &lt;/div&gt;
       &lt;div id="child12" class="child container"&gt;
           &lt;!--maybe there are more nested divs with class 'container' --&gt;
       &lt;/div&gt; 
    &lt;/div&gt;
    &lt;div id="child2" class="child container"&gt;
       &lt;div id="child21" class="child container"&gt;
           &lt;!--maybe there are more nested divs with class 'container' --&gt;
       &lt;/div&gt;
       &lt;div id="child122" class="child container"&gt;
           &lt;!--maybe there are more nested divs with class 'container' --&gt;
       &lt;/div&gt; 
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>JS code:</p>

<pre><code>$(function() {
    $('div.container').mouseenter(function(e){
        e.stopPropagation();
        $(this).css("border","2px solid red");//set it selected state.
        $(this).append("&lt;div class='newdiv'&gt;&lt;/div&gt;"); 
        $(this).parents().each(function(){
            if ($(this).children(".newdiv").length&gt;0)
            {
                $(this).children(".newdiv").remove();
                $(this).css("border","1px solid black");//set father of it not selected state
            }
        });
    }).mouseleave( function(e){
        $(".newdiv",this).remove();
        if ($(this).parent().hasClass("container") &amp;&amp; $(".newdiv",$(this).parent()).length==0)
        {
            $(this).parent().css("border","2px solid red");//set it's parent selected state.
            $(this).parent().append("&lt;div class='newdiv'&gt;&lt;/div&gt;"); 
        }
        $(this).css("border","1px solid black");//set it not selected state.
    });
});
</code></pre>

<p>I doubted there is a race issue if I moved the mouse fast enough in and out these div. because I found sometimes the <code>div.newdiv</code> wasn't removed.  I think I just didn't understand the running mechanism of the javascript. So I have such a question. Hope someone  would like to tell me more about it to help me understand it better. thanks.</p>
