setTimeout 中的函数给出未定义的答案

【问题标题】：function inside a setTimeout gives undefinedsetTimeout 中的函数给出未定义的
【发布时间】：2018-10-22 10:54:01
【问题描述】：

我想在每次 api 调用后设置一些等待时间。所以我在for循环中为api调用添加了setTimeout，但它提供了在setTimeout中未定义的createAPIService的api服务。下面是我的代码。

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

}

【问题讨论】：

How to access the correct `this` inside a callback?的可能重复

标签： javascript angular for-loop angular5

【解决方案1】：

尝试使用箭头函数语法保留this

的范围

setTimeout(() => { 而不是 setTimeout(function() => {：

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

  console.log(this.addconcession);

}

【讨论】：

它不适用于每个 api 调用..我想在每个循环之间设置一些时间。现在在这个时间之后所有的 api 调用一次
为什么你首先使用setTimeout？
根据循环 api 命中有 for 循环。因此，如果 foodlength 为 5，则所有 api 一次命中，然后一次调用 5 次 api。所以因为这个服务器抛出错误所以我想在每个循环之间设置一些时间

【解决方案2】：

使用箭头函数，即setTimeout(()=>{ },1000)。它将继承父级的this，您将能够使用this 访问类的所有方法和变量。

【讨论】：

它不适用于每个 api 调用..我想在每个循环之间设置一些时间。现在在这个时间之后所有的 api 调用一次

【解决方案3】：

将此“setTimeout(function(){”替换为“setTimeout(()=> {”。

【讨论】：

【解决方案4】：

当您使用箭头函数时，您会创建一个闭包。闭包是一个内部函数，它可以访问外部（封闭）函数的变量——作用域链。闭包具有三个作用域链：它可以访问自己的作用域（在其大括号之间定义的变量），它可以访问外部函数的变量，它可以访问全局变量。

【讨论】：