I would like to know if there is a way to use setTimeout recursive implements with an arrow function, in order to use this (refers to my class attribute for example) inside. Indeed, this = undefined when i declare my setTimeout with a normal function
I got :
public currentIndex: number = 0;
setTimeout(function run(){
this.currentIndex++;
console.log(this.currentIndex); // returns undefined
setTimeout(run, 1000);
}, 1000)
Instead of :
setTimeout(() => {
this.currentIndex++;
console.log(this.currentIndex) // returns currentIndex value
setTimeout( ?? , 1000) // What should i put instead of '??' ?
}, 1000)
You could bind this first and then use this function for all calls.
function run(reference) {
this.currentIndex++;
console.log(this.currentIndex); // returns undefined
setTimeout(reference, 1000, reference);
}
const runThis = run.bind(thisReference);
setTimeout(runThis, 1000, runThis);
Its because arrow function does not create new context inside arrow function body but normal function does. So this in arrow function refers to parent scope context but this in normal function refers to its own context.
This will create setTimeouts recursively
let currentIndex = 0;
const run = () => {
setTimeout(() => {
currentIndex++;
console.log(currentIndex);
run();
}, 1000);
}
run();but better approach may be (I don't know your use case, so it is just maybe) to use setInterval()
let currentIndex = 0;
const interval = setInterval(() => {
currentIndex++;
console.log(currentIndex);
// stop interval
if (currentIndex >= 10) {
clearInterval(interval);
}
}, 1000);