469,357 Members | 1,590 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,357 developers. It's quick & easy.

Javascript "Concurrency"

I need the opposite of this. What I want to happen is the page loads, div_a hides after 3 seconds and then div_b hides after 3 more seconds. If I set both timeouts to 3 seconds, they happen together as if the clock starts from page load, not when the last event finished like other scripting, eg Python. I have to wait 3 seconds for the first and 6 seconds for the second per the last line of code.

Expand|Select|Wrap|Line Numbers
  1. var ta = 3000;
  2. var tb = 3000;
  3.  
  4. var hideDivA = function() {
  5.     $('#div_a').css({"display":"none"});
  6.     }
  7. var hideDivB = function() {
  8.     $('#div_b').css({"display":"none"});
  9.     }
  10.  
  11. setTimeout(hideDivA, ta);<!--wait 3 seconds-->
  12. setTimeout(hideDivB, ta+tb);<!--wait 3 more-->
  13.  
Oct 11 '11 #1
3 1800
Dormilich
8,652 Expert Mod 8TB
setTimeout() does not stop the script for the time given, it sets a countdown after which the given function is to be executed and then proceeds.
the simple solution for your case is to use a delay of 6 seconds on the second function.
Oct 11 '11 #2
Thanks for the reply! That makes perfect sense.

To add a bit to this, the project was supposed to be written in a digital signage software that is perfectly suited to this, but was moved to html5 (because it sounds fancy, seriously) by the customer and the boss went along with it, against all the programmers' advice :(. I'm stuck with it and learning under fire as we don't do html at all! I guess what I really need is a more single-threaded behavior, much like Python or VB script, so that I can manage a large number of automated events/animations more easily. Any ideas out there to accomplish this? I'm just this one piece away from figuring it out.
Oct 11 '11 #3
Rabbit
12,516 Expert Mod 8TB
Why not cascade the timeout?

Expand|Select|Wrap|Line Numbers
  1. var ta = 3000; 
  2. var tb = 3000; 
  3.  
  4. var hideDivA = function() { 
  5.     $('#div_a').css({"display":"none"}); 
  6.     setTimeout(hideDivB, tb);<!--wait 3 more--> 
  7.     } 
  8.  
  9. var hideDivB = function() { 
  10.     $('#div_b').css({"display":"none"}); 
  11.     } 
  12.  
  13. setTimeout(hideDivA, ta);<!--wait 3 seconds--> 
Oct 11 '11 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Jenna Schmidt | last post: by
3 posts views Thread by stefan.albert | last post: by
reply views Thread by Roland Schwarz | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.