SetTimeout recursive with arrow function

Question

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)

Are you looking for setInterval instead to do your recursive job? developer.mozilla.org/en-US/docs/Web/API/setInterval — Himanshu Aggarwal
– Himanshu Aggarwal, Commented Nov 10, 2021 at 9:17
As I answered to ciekals11, setInterval seems to not be adapted in my case, due to executing time of my code inside — Fab83i
– Fab83i, Commented Nov 10, 2021 at 9:21
Another approach could be a loop that pauses between iterations using await like for(;;await delay(1000)){ this.currentIndex++; } — Thomas
– Thomas, Commented Nov 10, 2021 at 10:21

Nina Scholz · Accepted Answer · 2021-11-10 09:14:27Z

1

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

answered Nov 10, 2021 at 9:14

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ludvík Prokopec · Accepted Answer · 2021-11-10 09:14:43Z

1

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.

answered Nov 10, 2021 at 9:14

Ludvík Prokopec

1224 bronze badges

Comments

ciekals11 · Accepted Answer · 2021-11-10 09:16:01Z

1

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

answered Nov 10, 2021 at 9:16

ciekals11

2,1731 gold badge15 silver badges29 bronze badges

2 Comments

Fab83i Over a year ago

I would have used setInterval but I saw that the interval chosen is not guarantee, due to execution time of the program. For example, if the code inside take longer than expected, the time will be impacted. Is that true ?

ciekals11 Over a year ago

I think that this answers your question

p4m · Accepted Answer · 2021-11-10 09:14:26Z

0

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.

answered Nov 10, 2021 at 9:14

p4m

3763 silver badges10 bronze badges

Collectives™ on Stack Overflow

SetTimeout recursive with arrow function

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related