CODEWITHSUNDEEP
javascriptangulartypescript
Fab83i
Fab83i

Reputation: 85

SetTimeout recursive with arrow function

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)

Upvotes: 3

Views: 1297

Answers (4)

ciekals11
ciekals11

Reputation: 2155

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

Upvotes: 1

Ludvík Prokopec
Ludvík Prokopec

Reputation: 122

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.

Upvotes: 1

Nina Scholz
Nina Scholz

Reputation: 386654

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

Upvotes: 1

p4m
p4m

Reputation: 376

Probably the easiest way is to extract the arrow function into its own variable:

const run = () => {
    this.currentIndex++;
    console.log(this.currentIndex);
    setTimeout(run, 1000);
};
setTimeout(run, 1000);

Though in this particular example you could simplify it even more using setInterval instead of setTimeout, avoiding the second setTimeout call entirely.

Upvotes: 0

Related Questions