Me gustaría saber si hay una manera de usar implementos recursivos setTimeout con una función de flecha, para usar this (se refiere a mi atributo de clase, por ejemplo) dentro. De hecho, this = undefined cuando declaro mi setTimeout con una función normal
Obtuve :
public currentIndex: number = 0; setTimeout(function run(){ this.currentIndex++; console.log(this.currentIndex); // returns undefined setTimeout(run, 1000); }, 1000)En vez de :
setTimeout(() => { this.currentIndex++; console.log(this.currentIndex) // returns currentIndex value setTimeout( ?? , 1000) // What should i put instead of '??' ? }, 1000)Puede vincular this primero y luego usar esta función para todas las llamadas.
function run(reference) { this.currentIndex++; console.log(this.currentIndex); // returns undefined setTimeout(reference, 1000, reference); } const runThis = run.bind(thisReference); setTimeout(runThis, 1000, runThis);Es porque la función de flecha no crea un nuevo contexto dentro del cuerpo de la función de flecha, pero la función normal sí lo hace. Entonces, esto en la función de flecha se refiere al contexto del alcance principal, pero esto en la función normal se refiere a su propio contexto.
Esto creará setTimeouts recursivamente
let currentIndex = 0; const run = () => { setTimeout(() => { currentIndex++; console.log(currentIndex); run(); }, 1000); } run();pero un mejor enfoque puede ser (no conozco su caso de uso, por lo que es solo tal vez) usar setInterval ()
let currentIndex = 0; const interval = setInterval(() => { currentIndex++; console.log(currentIndex); // stop interval if (currentIndex >= 10) { clearInterval(interval); } }, 1000);