0

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).

:Program Description:

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.

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.

:Implementation Bug/Problem:

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.

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!

Example

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

seconds 0    2    4    6      
        +----+----+----+
divs    A    B    A    B

NOTE: the top row are the 2 second intervals, the bottom row are the div flip events

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

seconds 0    2    4    6
        +----+----+----+
divs    A    BBBBBA    B

what it currently does:

 seconds 0    2    4    6....
         +----+----+----+....
 divs    A    BBBBBBBBBBB....

the scheduled A event never happens.

ct_
  • 1,189
  • 4
  • 20
  • 34
  • Can you provide an example to illustrate the problem? – James Montagne Jan 04 '12 at 22:00
  • Please show show html and JS. Are you saying that the form buttons refresh just the form (either with Ajax or with no server request at all), or do they refresh the whole page (which would clear your timeout)? – nnnnnn Jan 04 '12 at 22:07
  • OK, thanks for taking the time to provide the illustrations, but if you could also respond to my previous comment? – nnnnnn Jan 04 '12 at 23:09
  • SKS put up a nice resource (I'm not 100% sure how to share that content with you all in a concise manner), I'll try and post up demo code soon. – ct_ Jan 05 '12 at 15:34

1 Answers1

1

I think you missed to use clearTimeout or probably you are clearing the timer and not scheduling it back.

I quickly tried to simulate what you described. I am not sure if this is what you want, but check my

Old DEMO here (buggy when clicked multiple times, see the below link)

I am using setTimeout to call the function. Try using setInterval, which will be executed every n secs.

Edit: I fixed a bug which I missed in my previous demo, Please see the below link and let me know if it is close to what you want.

DEMO

Selvakumar Arumugam
  • 79,297
  • 15
  • 120
  • 134
  • thanks for the demo code - it's spot on. so when the program first executes, just click the 'click me' button and keep clicking it. the div never goes away until after you stop clicking. – ct_ Jan 05 '12 at 15:41
  • oh by spot-on i meant it's simulating the issue correctly - my apologies. – ct_ Jan 05 '12 at 16:13
  • Check my new demo link, I think I made a blunder in my prev demo. – Selvakumar Arumugam Jan 05 '12 at 16:15
  • SKS - check this stackoverflow link: http://stackoverflow.com/questions/729921/settimeout-or-setinterval the comment with ~100+ bumps explains the issue in more complete terms. – ct_ Jan 05 '12 at 16:24
  • Did you check my new demo, I believe it has what you want? Yea, You can read the same in w3schools in more detail. – Selvakumar Arumugam Jan 05 '12 at 16:43
  • SKS - it works pretty well, seems to queue up a little better than the implementation I've put together - thanks a lot! – ct_ Jan 05 '12 at 20:09