6

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...

mowwwalker
  • 16,634
  • 25
  • 104
  • 157
  • 1
    Couldn't you put them in the same loop? – Kevin Burke Aug 10 '11 at 00: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 Aug 10 '11 at 00: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 Aug 10 '11 at 01:25

4 Answers4

9

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().

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Thanks. What's the difference between this and threading a function? – mowwwalker Aug 10 '11 at 00:23
  • @user828584 - What do you mean by "threading a function"? Also, it would be nice if you gave yourself a real name so when we cross paths again, we have some chance of remembering who you are. – jfriend00 Aug 10 '11 at 01:11
  • $('#menu-container-src').show('slide', { direction: 'right' }, 1000); $('#menu-container-src-op').fadeTo(1000, 1); I need this two functions run simultaneously, is it possible in js? – AsIndeed Feb 13 '22 at 16:19
  • @AsIndeed - Please write your own question, describe your issue and show your code and HTML there. – jfriend00 Feb 13 '22 at 17:21
2

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

Kratz
  • 4,280
  • 3
  • 32
  • 55
2

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.

Alex Wayne
  • 178,991
  • 47
  • 309
  • 337
1

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

Benjamin Atkin
  • 14,071
  • 7
  • 61
  • 60