Timing in JS - multiple setIntervals running at once and starting at the same time?

问题

Let's say I have a function:

myFunc = function(number) {
  console.log("Booyah! "+number);
}

And I want it to run on a set interval. Sounds like I should use setInterval, huh!

But what if I want to run multiple intervals of the same function, all starting at the exact same time?

setInterval(function(){
  myFunc(1);
}, 500);

setInterval(function(){
  myFunc(2);
}, 1000);

setInterval(function(){
  myFunc(3);
}, 2000);

So that the first runs exactly twice in the time it takes the second to run once, and the same between the second and third.

How do you make sure that they all start at the same time so that they are in sync?

回答1:

Good question, but in JS you can't. To have multiple functions in the same program execute at the same time you need multi-threading and some deep timing and thread handling skills. JS is single threaded. setInterval doesn't acutally run the function after the delay, rather after the delay it adds the function to the event stack to be run as soon as the processor can get to it. If the proc is busy with another operation, it will take longer than the delay period to actually run. Multiple intervals/timeouts are all adding calls to the same event stack, so they run in turn as the proc is available.

回答2:

function Timer(funct, delayMs, times)
{
  if(times==undefined)
  {
    times=-1;
  }
  if(delayMs==undefined)
  {
    delayMs=10;
  }
  this.funct=funct;
  var times=times;
  var timesCount=0;
  var ticks = (delayMs/10)|0;
  var count=0;
  Timer.instances.push(this);

  this.tick = function()
  {
    if(count>=ticks)
    {
      this.funct();
      count=0;
      if(times>-1)
      {
        timesCount++;
        if(timesCount>=times)
        {
          this.stop();
        }
      }
    }
    count++; 
  };

  this.stop=function()
  {
    var index = Timer.instances.indexOf(this);
    Timer.instances.splice(index, 1);
  };
}

Timer.instances=[];

Timer.ontick=function()
{
  for(var i in Timer.instances)
  {
    Timer.instances[i].tick();
  }
};

window.setInterval(Timer.ontick, 10);

And to use it:

function onTick()
{
  window.alert('test');
}
function onTick2()
{
  window.alert('test2');
}
var timer = new Timer(onTick, 2000,-1);
var timer = new Timer(onTick2, 16000,-1);

For a finite number of ticks, change the last parameter to a positive integer for number. I used -1 to indicate continuous running.

Ignore anyone who tells you that you can't. You can make it do just about any thing you like!

回答3:

JavaScript is single threaded. You can use html5 web worker or try using setTimeout recursively. Create multiple functions following this example:

var interval = setTimeout(appendDateToBody, 5000);

function appendDateToBody() {
    document.body.appendChild(
        document.createTextNode(new Date() + " "));
    interval = setTimeout(appendDateToBody, 5000);
}

Read this article:

http://weblogs.asp.net/bleroy/archive/2009/05/14/setinterval-is-moderately-evil.aspx

回答4:

You can make something like this.

arr = Array();
arr[0] = "hi";
arr[1] = "bye";
setTimer0 = setInterval(function(id){
  console.log(arr[id])
},1000,(0));

setTimer1 = setInterval(function(id){
  console.log(arr[id]);
},500,(1));

Hope it helps!

来源：https://stackoverflow.com/questions/20365971/timing-in-js-multiple-setintervals-running-at-once-and-starting-at-the-same-ti

标签

javascript

jquery

intervals

timing