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?

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?

• javascript
• function
• time
• execute

• You should setTimeout a setInterval call. – Waleed Khan Commented Nov 25, 2012 at 22:08
• 2 This is a technicality, but since JS is single threaded, you can't execute them at the exact same time. – user1726343 Commented Nov 25, 2012 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 Commented Nov 25, 2012 at 22:20
• Does this form some kind of animation? – Phil H Commented Nov 25, 2012 at 22:21
• 1 Do you want 2 lights to be on at any given time? Something like jsfiddle/8cwA6/2 Or only one at a time? – user1726343 Commented Nov 25, 2012 at 22:39

3 Answers 3

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.

Just give them all the same class and affect that class. http://jsfiddle/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>

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/8cwA6/1/

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