javascript - attribute - Cronometraje en JS: ¿varios setIntervals ejecutándose a la vez y comenzando al mismo tiempo?

title html

Question

Digamos que tengo una función:

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

Y quiero que se ejecute en un intervalo establecido. Parece que debería usar setInterval , ¡eh!

Pero, ¿qué sucede si deseo ejecutar varios intervalos de la misma función, todos comenzando exactamente al mismo tiempo?

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

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

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

De modo que el primero se ejecuta exactamente dos veces en el tiempo que tarda el segundo en ejecutarse una vez, y lo mismo entre el segundo y el tercero.

¿Cómo se asegura de que todos comiencen al mismo tiempo para que estén sincronizados?

Answer 1

Buena pregunta, pero en JS no puedes. Para que se ejecuten varias funciones en el mismo programa al mismo tiempo, se necesitan múltiples subprocesos y algunas habilidades de sincronización profunda y manejo de subprocesos. JS es de un solo hilo. setInterval no ejecuta la función de forma setInterval después de la demora, más bien, después de la demora, agrega la función a la pila de eventos para que se ejecute tan pronto como el procesador pueda acceder a ella. Si el proceso está ocupado con otra operación, demorará más que el período de demora en ejecutarse. Múltiples intervalos / tiempos de espera están agregando llamadas a la misma pila de eventos, por lo que se ejecutan por turnos cuando el proceso esté disponible.

Answer 2

JavaScript es de un solo hilo. Puede usar html5 web worker o intentar usar setTimeout de forma recursiva. Crea múltiples funciones siguiendo este ejemplo:

var interval = setTimeout(appendDateToBody, 5000);

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

Lee este artículo:

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

Answer 3

Puedes hacer algo como esto.

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));

¡Espero eso ayude!

Answer 4

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);

Y para usarlo:

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

Para un número finito de tics, cambie el último parámetro a un entero positivo para el número. Utilicé -1 para indicar funcionamiento continuo.

Ignora a quien te diga que no puedes. ¡Puedes hacerlo hacer lo que quieras!