javascript - ¿Cómo cambiar el tiempo de intervalo dinámicamente en el bucle For según el índice/número de iteración?

wait

Question

Como no pude comentar, me veo obligado a escribir esta publicación. Obtuve el siguiente código que retrasa / espera exactamente 1 segundo o 1000 milisegundos:

let n = 5;
for (let i=1; i<n; i++)
{
  setTimeout( function timer()
  {
      console.log("hello world");
  }, i*1000 );
}

Pero, ¿cómo puedo retrasarlo i * 1000 segundos en lugar de 1000 milisegundos fijos para que la espera dependa del número de iteración?

Por ejemplo, si n = 5, entonces quiero que el bucle demore 1 segundo en la primera iteración. 2 segundos en la segunda iteración, y así sucesivamente ... el retraso final será de 5 segundos.

Answer 1

Aquí hay una función que se mostrará de inmediato, luego 1 segundo más tarde, 2 segundos después de eso, 3 segundos después de eso, etc. No se necesitan cálculos especiales, no se necesitan promesas.

const n = 5;
let cnt=0;

function show() {
  console.log("call "+cnt,"delay: ",cnt,"sec");
  cnt++;
  if (cnt > n) return; // we are done
  setTimeout(show, cnt*1000 ); // cnt seconds later
}
show()

Answer 2

El bucle no espera a que se complete la función de tiempo de espera. Entonces, cuando el ciclo se ejecuta, programa su alerta para cada índice.

Puede usar una función que se ejecutará de acuerdo con su índice pero programada al mismo tiempo. Puedes sentir la diferencia de 3 segundos.

function test(i){
    setTimeout( function timer(){
        console.log("hello world" + i);
    }, i*3000);
}
for (let i=1; i<4; i++) {
   test(i);
}

Answer 3

Me tomó un tiempo descifrar tu pregunta xD, pero ¿es esto lo que quieres?

Esto seguirá disparando console.log con i * 1000 de retraso cada vez. así que la primera vez durará 1 segundo (1 * 1000), luego será 2 segundos y así sucesivamente.

let i = 0;
loop = () => {
  setTimeout(() => {
    console.log(new Date()); // for clarity
    i++;
    if (i < 10) {
      loop();
    }
  }, i * 1000)
};
loop();

Answer 4

Puede intentar usar async / await (Promesas) para serializar su código:

const waitSeconds = seconds => new Promise(resolve => setTimeout(resolve, seconds))

async function main () {
 let oldDate = new Date()
 let newDate
 
 /* 
  * If you put ''await'' inside the loop you can synchronize the async code, and simulate
  * a sleep function
  */
 for (let i=1; i<5; i++) {
    await waitSeconds(i*1000)
    newDate = new Date()   
    console.log(`Loop for i=${i}, elapsed=${moment(newDate).diff(oldDate, ''seconds'')} seconds`)
    oldDate = newDate
 }
 
 console.log(''End'')
}

main()

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

Answer 5

Si bien esta tarea podría resolverse con promesas, flujos reactivos y otras herramientas geniales (¡hey, nadie ha sugerido usar trabajadores todavía!), También puede resolverse con un poco de aritmética.

Por lo tanto, desea tiempos de espera en una secuencia: 1s, el anterior + 2s, el anterior + 3s, y así sucesivamente. Esta secuencia es: 1, 3, 6, 10, 15 ... y su fórmula es a[n] = n * (n + 1) / 2 . Sabiendo que...

let n = 6;
console.log(new Date().getSeconds());

for (let i = 1; i < n; i++) {
  setTimeout(function timer() {
    console.log(new Date().getSeconds());
  }, 1000 * i * (i + 1) / 2);
}

Answer 6

Use llamadas recursivas en lugar de for loop

let i=1;
function a(i) {
  if (i > 5)
    return
  else
    b("message", i)
}

function b(s, f) {
  setTimeout(function timer() {
    console.log(s + " " + f + " seconds");
  }, f * 1000);
  a(++i);
}
a(i);

Answer 7

AL EXPLORAR la respuesta de @mbojko

for (let i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    console.log("Delaying - " + i + " seconds");
  }, 1000 * i * (i + 1) / 2);
}

function Explanation(){
  //This comes from the finite arithmetic series n(n+1)/2
            //http://www.maths.surrey.ac.uk/hosted-sites/R.Knott/runsums/triNbProof.html
            //for first five iterations..
            //1000 * 1 * (1+1)/2 = 1
            //1000 * 2 * (2+1)/2 = 3
            //1000 * 3 * (3+1)/2 = 6
            //1000 * 4 * (4+1)/2 = 10
            //1000 * 5 * (5+1)/2 = 15
}