A wait function from a promise

Question

I have the following functions that I'm trying to call from a .then()

   public waitFunction(): any {
        setTimeout(function() {
            this.getMap1();
        }, 1000);
        return;
    }

    public getMap1(): any {
        this.autoSchemaRecords = null;
        this._clientFileMappingService.getAllById(this._clientFileId).subscribe(
            r => {
                this.autoSchemaRecords = r;
            },
            e => {
                this.showLoader = false;
                throw e;
            },
            () => {
                this.showLoader = false;
            }
        );
        return;
    }

When I try to call the waitFunction() from the .then() below I get the following error:

this.getMap1 is not a function

const result = this._clientFileMappingService
    .fileUpload(autoSchema, this._clientFileId)
    .then(this.hideModal(), this.waitFunction())
    .catch(err => {
        throw err;
    });

This is confusing me because everything but the services are in the same component.

I am currently using a promise in my .fileUpload method for various reasons. If that function was an observable, I don't think I would be having this issue. However, I can't change it at this time.

Can anyone lead me in the right direction to be able to wait 1 second to repopulate autoSchemeaRecords collection?

Answer 1

That "arrow syntax" or some call it the "fat arrow syntax" for declaring a function was added to the language specifically to solve this type of problem.

All function calls to functions defined with the regular function syntax (without the fat arrow syntax) cause a new value of this to be set according to how the function is called. You can see the various way that this is set or controlled here The six ways to control the value of this in a function call.

So, the callback you had to your setTimeout() will cause a different value of this inside that callback. In this case it will be either the global value or undefined (if running in strict mode) since it will be "reset" to the default value when setTimeout() calls the callback.

Assuming that waitFunction() is a method that has the correct this itself (which is what your code shows) and is called like obj.waitFunction() or this.waitFunction(), then you can switch to a fat arrow function, and it will preserve the lexical value of this rather than set a new one:

public waitFunction(): any {
    setTimeout(() => {
         // will have the same value of this that was
         // present before the setTimeout() was executed
         // which is what you want
         this.getMap1();
    }, 1000);
    return;
}

Or, a more compact version (single statement arrow functions can skip the braces):

public waitFunction(): any {
    setTimeout(() => this.getMap1(), 1000);
}

The lexical value of this is what the value of this was naturally BEFORE the setTimeout() function call when that code ran. In this case that is the value you want inside the callback so the fat arrow syntax is perfect for this situation because it preserves the value of this that you want.

So, the fat arrow syntax is basically two things:

1. A shorter function declaration syntax
2. A means of preserving the lexical value of this inside the function

They are perfect for inline function declarations when you want to preserve the value of this

You can read more about them here on MDN.

---

Also, keep in mind that waitFunction() would better be named delayFunction() because it doesn't actually "wait" for anything. setTimeout() is non-blocking. It will call this.getMap1() after a delay, but it returns immediately and your other code continues to run. So, it's not really a "wait". Just wanted to make sure you weren't confused about that.

Answer 2

setTimeout is from vanilla JS, so according to your code

   public waitFunction(): any {
    let context=this;
    setTimeout(function() {
        context.getMap1();
    }, 1000);
    return;
}

public getMap1(): any {
    this.autoSchemaRecords = null;
    this._clientFileMappingService.getAllById(this._clientFileId).subscribe(
        r => {
            this.autoSchemaRecords = r;
        },
        e => {
            this.showLoader = false;
            throw e;
        },
        () => {
            this.showLoader = false;
        }
    );
    return;
}

for easy understanding, pass the context as a variable, otherwise setTimeout will try to find the context from a JS environment.