Executing JS Functions at the exact same time

Question

I'm trying to execute two different functions at the exact same time.

I have a row of images, and one after the other they light up by changing their opacity, to make it look like they're blinking. Problem is that the timing needs to be exact, and with the few milliseconds of difference, after a minute or two it just looks like a mess.

    <img src="img1" class="1" /><img src="img2" class="2" /><img src="img3" class="3" />

    <script type="javascript">
    setTimeout(function blinkone(){$('.1').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinkone);},1000)

    setTimeout(function blinktwo() {$('.2').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinktwo);},2000)

    setTimeout(function blinkthree() {$('.3').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinkthree);},3000)
    </script>

How can I execute multiple functions at the exact same time?

This is a technicality, but since JS is single threaded, you can't execute them at the *exact* same time. — Asad Saeeduddin, Nov 25 '12 at 22:17
You can't get them to execute at _exactly_ the same time, but your problem will go away if you execute them all in the same timeout or interval — meouw, Nov 25 '12 at 22:20
check my fiddle http://jsfiddle.net/popnoodles/amD8T/2/ - they are in sync — Popnoodles, Nov 25 '12 at 22:31
Do you want 2 lights to be on at any given time? Something like http://jsfiddle.net/8cwA6/2/ Or only one at a time? — Asad Saeeduddin, Nov 25 '12 at 22:39
good question. this can all be done in sync with animation and callbacks — Popnoodles, Nov 25 '12 at 22:41

score 4 · Answer 1 · answered Nov 25 '12 at 22:20

Javascript is single-threaded, so you cannot execute many functions at the EXACT same time, literally. You could work around this by grouping your setTimeout call, eg:

var iterationCount = 0;
setTimeout(function(){
   iterationCount++;
   $('.1').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinkone);
   if (iterationCount % 2 == 0) {
      $('.2').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinktwo);
   }
   if (iterationCount % 3 == 0) {
      $('.3').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinkthree);
   }
},1000);

This way, you avoid losing the sinchronization between animations.

Popnoodles · Answer 2 · 2012-11-25T22:29:37.680

2

Just give them all the same class and affect that class. http://jsfiddle.net/popnoodles/amD8T/2/

<img src="img1" class="blink" />
<img src="img2" class="blink" />
<img src="img3" class="blink" />

<script>
$(function(){

    offon();

});

function offon()
{
    $('.blink').animate({opacity:0},1000)
        .animate({opacity:1},1000, function(){
            offon();
        });
}
</script>

edited Nov 25 '12 at 22:29

answered Nov 25 '12 at 22:23

Popnoodles

28,090
2
45
53

You might want to use colored divs so the effect can actually be seen. – Asad Saeeduddin Nov 25 '12 at 22:31
I get image placeholders (chrome) but yes FF just hides. I'll add alt tags and borders to show them, thanks – Popnoodles Nov 25 '12 at 22:32

Asad Saeeduddin · Accepted Answer · 2012-11-25T22:36:33.960

0

You could also chain the callbacks recursively, which is a lot cleaner IMO:

function display(number){
    number = number || 1
    $('.'+ (number % 3 + 1)).delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, function(){display(++number);});
}

This also scales well, so you don't have to add 100 lines of code to add the effect to 100 images.

Here is a demonstration: http://jsfiddle.net/8cwA6/1/

I'm not entirely sure, but maybe the effect you want is more like this fiddle: http://jsfiddle.net/8cwA6/2/

edited Nov 25 '12 at 22:36

answered Nov 25 '12 at 22:26

Asad Saeeduddin

46,193
6
90
139

Thank you so much! This worked perfectly, it was exactly what I needed! (And since this will probably have 20-30 images, the easy scalability of it is awesome.) – Sera Nov 26 '12 at 02:40

Executing JS Functions at the exact same time

3 Answers3