How do I have two separate functions run simultaneously? If I wanted two clocks, one to count up and the other to count down, and I wanted them to run at the same time, how would I do it?

If I just did:

var up = 1;
while(true){
    document.write(up);
    up++;
    if(up==11)
        up=1;
}
var down = 10;
while(true){
    document.write(down);
    down--;
    if(down==0)
        down=10;
}

...it would just keep counting up...

How do I have two separate functions run simultaneously? If I wanted two clocks, one to count up and the other to count down, and I wanted them to run at the same time, how would I do it?

If I just did:

var up = 1;
while(true){
    document.write(up);
    up++;
    if(up==11)
        up=1;
}
var down = 10;
while(true){
    document.write(down);
    down--;
    if(down==0)
        down=10;
}

...it would just keep counting up...

• javascript

• 1 Couldn't you put them in the same loop? – Kevin Burke Commented Aug 10, 2011 at 0:01
• 1 I just put the example because I don't want to feel like a dick for asking a bunch of questions without any code in them. I have other things in mind than just this. – mowwwalker Commented Aug 10, 2011 at 0:03
• As has been pointed out you shouldn't run loops like that because it'll freeze the browser, but still even if your real world use case is more complicated then the example you posted I don't see why you can't put both in the same loop like Kevin said. – nnnnnn Commented Aug 10, 2011 at 1:25

4 Answers 4

Javascript is single threaded. There is only one thread that can ever access the page.

It is possible in some HTML5 browsers to use Web Workers to execute some code in another thread and then communicate with the main thread via messaging, but the Web Worker thread cannot access the DOM in any way.

If you want counters to run in a loop, the typical way of doing that is by using timers and then setting the contents of an object in the DOM each time the timer goes. In this way, you can appear to have multiple things running at the same time, but in reality, they are still one at a time, just separately timed.

Here's an example of two counters that "appear" to be running at the same time: http://jsfiddle.net/jfriend00/3yc9r/.

The code for that is this (run after the page is loaded):

var cntr1 = 1;
var cntr2 = 2;

setInterval(function() {
    document.getElementById("time1").innerHTML = cntr1 += 13;
}, 33);

setInterval(function() {
    document.getElementById("time2").innerHTML = cntr2 += 5;
}, 44);

Also, you really don't want to be doing document.write() in a loop. Code that's going to run for awhile should run after the page is loaded and should modify objects in the DOM directly rather than use document.write().

You would have to put both counters in the same loop, but JavaScript is inherently single threaded, your code example would freeze the browser. Try using the SetTimeout or SetInterval function to fire an event at a specific interval. http://www.w3schools.com/js/js_timing.asp

You don't. Javascript is single threaded. If you wanted a clock you would use asynchrounous timeouts.

// Counts up and down by one per second.

var up = 1;
setTimeout(function() {
  up++;
  document.write(up);
}, 1000);

var down = 10;
setTimeout(function() {
  down--;
  document.write(down);
}, 1000);

JS can only ever do one thing at a time (meaning in one single threaded run loop), but it supports lacing asynchronous callbacks together very very well.

You can't, and if you write to the body in a loop, it will be slow.

Instead use setTimeout() to run the next iteration of a forever loop. https://developer.mozilla.org/en/window.setTimeout