Javascript "Concurrency"

[Dave750]

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.

var ta = 3000;
var tb = 3000;

var hideDivA = function() {
    $('#div_a').css({"display":"none"});
    }
var hideDivB = function() {
    $('#div_b').css({"display":"none"});
    }

setTimeout(hideDivA, ta);<!--wait 3 seconds-->
setTimeout(hideDivB, ta+tb);<!--wait 3 more-->

[Dormilich]

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.

[Dave750]

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.

[Rabbit]

Why not cascade the timeout?

var ta = 3000; 
var tb = 3000; 
  
var hideDivA = function() { 
    $('#div_a').css({"display":"none"}); 
    setTimeout(hideDivB, tb);<!--wait 3 more--> 
    } 

var hideDivB = function() { 
    $('#div_b').css({"display":"none"}); 
    } 
  
setTimeout(hideDivA, ta);<!--wait 3 seconds-->