function inside a setTimeout gives undefined

Question

I want to set some wait time after each api calling. So I have added setTimeout for api calling in for loop but it giving api service that is createAPIService undefined in setTimeout. Below is my code.

for (let i = 0; i < this.fooditemselecteddetails.length; i++) {
  this.spinnerService.hide();
  setTimeout(function() {
    this.common.createAPIService('api/booking/AddConcessions?CinemaId=' + this.cinemaid + '&TransactionId=' + this.temptransaction.TransactionId + '&ItemId=' + this.fooditemselecteddetails[i].id + '&Quantity=' + this.fooditemselecteddetails[i].quantity + "&BookingId=" + this.transactionAPIRequest.ORDER_ID, '')
  .subscribe((result: any) => {

      this.spinnerService.hide();
      this.addconcession = result;
      console.log(this.addconcession);


      if (this.addconcession.IsSuccess == true) {

        if (i == this.fooditemselecteddetails.length - 1) {
          localStorage.setItem("bookingid", this.transactionAPIRequest.ORDER_ID);
          this.common.createAPIService('api/booking/FinalBookingDetails?BookingId=' + this.transactionAPIRequest.ORDER_ID, '').subscribe((result2: any) => {
            this.vistavalidation = result2;
            if (this.vistavalidation.BookingID > 0) {
              this.common.createAPIService('api/booking/ContinueTransaction?CinemaId=' + this.cinemaid + '&TransactionId=' + this.temptransaction.TransactionId, '').subscribe((result3: any) => {
                if (result3.IsSuccess) {
                  this.ContinueTransactionresult = result3;
                  this.showTabOnClick('tabs-4');
                } else {
                  this.common.ShowNotification("Food Item", result3.Error, "info");
                  this.spinnerService.hide();
                }
              });
            } else {

              this.common.ShowNotification("Food Item", 'something went wrong, please try again', "info");
              this.spinnerService.hide();
            }
          });
        }
      } else {
        this.common.ShowNotification("Food Item", result.Error, "error");
        this.spinnerService.hide();

      }
    });
  }, 2000);

  console.log(this.addconcession);

}

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — ConnorsFan, Oct 22 '18 at 12:06

score 1 · Answer 1 · answered Oct 22 '18 at 10:57

1

Try using arrow function syntax to retain the scope of this

setTimeout(() => { instead of setTimeout(function() => {:

for (let i = 0; i < this.fooditemselecteddetails.length; i++) {
  this.spinnerService.hide();
  setTimeout(() => { ... }, 2000);

  console.log(this.addconcession);

}

answered Oct 22 '18 at 10:57

SiddAjmera

38,129
5
72
110

It's not applying on each api call..I want to set some time between each loop. Now after this time all api calls at once – Sagar Kodte Oct 22 '18 at 11:02
Why exactly are you using a `setTimeout` in the first place though? – SiddAjmera Oct 22 '18 at 11:06
There is for loop as per loop api hits. So all api hits at one time if there is foodlength is 5 then 5 time api calls at one time. So because of this server throwing error so I want to set some time between each loop – Sagar Kodte Oct 22 '18 at 11:10

score 1 · Answer 2 · answered Oct 22 '18 at 10:58

1

Use arrow function i.e. setTimeout(()=>{ },1000). It will inherit the this of the parent and you would be able to access all methods and variables of class using this.

answered Oct 22 '18 at 10:58

Nabil Shahid

1,448
8
11

It's not applying on each api call..I want to set some time between each loop. Now after this time all api calls at once – Sagar Kodte Oct 22 '18 at 11:04

score 0 · Answer 3 · answered Oct 22 '18 at 10:57

0

replace this "setTimeout(function(){ " to "setTimeout(()=> { ".

answered Oct 22 '18 at 10:57

Ajay Ojha

380
1
3
9

score 0 · Answer 4 · answered Oct 22 '18 at 11:02

When you use the arrow function you create a closure. A closure is an inner function that has access to the outer (enclosing) function's variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function's variables, and it has access to the global variables.

More detail here: http://javascriptissexy.com/understand-javascript-closures-with-ease/

function inside a setTimeout gives undefined

4 Answers4