Form buttons over-writing timeout events in javascript
<p>I'm developing a javascript based application and have continued to run into an issue that seems like a producer/consumer problem (it happens in both IE and firefox).</p>

<p>:Program Description:</p>

<p>There are two divs (A and B) in the page. A function is scheduled with timeouts to flip between the two divs every N seconds.</p>

<p>divs B has a form in it with buttons. the buttons have an on click call back set to them - the call back resets (refreshes) the form.</p>

<p>:Implementation Bug/Problem:</p>

<p>When div B displays and a user clicks on the buttons multiple times, the function (scheduled by a timeout) to flip the two divs never seems to execute. If it does execute, the display content is shown so quickly, it's as if the timeout was never called.</p>

<p>I've tried using a globally scoped state variable to control when button presses should be shut off, but that does not seem to work. Any advice or recommendations is welcome! Thanks!</p>

<p>Example</p>

<p>Imagine a 2 second window between each, the following diagram explains how it works with no onclick mouse events:</p>

<pre><code>seconds 0    2    4    6      
        +----+----+----+
divs    A    B    A    B 
</code></pre>

<p>NOTE: the top row are the 2 second intervals, the bottom row are the div flip events</p>

<p>with mouse on click events it should do something like this (A is scheduled to happen exactly at 4 seconds):</p>

<pre><code>seconds 0    2    4    6
        +----+----+----+
divs    A    BBBBBA    B 
</code></pre>

<p>what it currently does:</p>

<pre><code> seconds 0    2    4    6....
         +----+----+----+....
 divs    A    BBBBBBBBBBB.... 
</code></pre>

<p>the scheduled A event never happens.</p>
