Angular - 设置间隔在 for 循环内无法正常工作答案

【问题标题】：Angular - Set interval is not working properly inside for loopAngular - 设置间隔在 for 循环内无法正常工作
【发布时间】：2021-11-22 02:04:10
【问题描述】：

我想以动态间隔调用 API。但是当我尝试使用下面的代码 sn-p 时，它正在工作，但间隔时间无法正常工作。我需要实现动态短轮询。版本：Angular 7

ngOnInit() {
    this.liveFunction();
}

liveFunction() {
    var list = [{
        "id": 1,
        "timer": 10000,
        "url": "https://www.sampleurl.com/1"
    },
    {
        "id": 2,
        "timer": 20000,
        "url": "https://www.sampleurl.com/users/1"
    }];
    for (var i = 0, len = list.length; i < len; i += 1) {
        (function (i) {
            setInterval(function () {
                this.invokeAPI(list[i].url)
            }, list[i].timer)
        })(i);
    }
}

invokeAPI (url) {
    //do stuff 
}

【问题讨论】：

标签： javascript angular typescript setinterval

【解决方案1】：

您必须实现 async - await 逻辑才能使其工作。试试这个：

async ngOnInit() {
    await this.liveFunction();
}

async liveFunction() {
    var list = [{
        "id": 1,
        "timer": 10000,
        "url": "https://www.sampleurl.com/1"
    },
    {
        "id": 2,
        "timer": 20000,
        "url": "https://www.sampleurl.com/users/1"
    }];
    for (var i = 0, len = list.length; i < len; i += 1) {
        (function (i) {
            setInterval(function () {
                this.invokeAPI(list[i].url)
            }, list[i].timer)
        })(i);
    }
}

invokeAPI (url) {
    //do stuff 
}

【讨论】：

【解决方案2】：

您在使用function 语句时失去了作用域，看看：

    for (var i = 0, len = list.length; i < len; i += 1) {
        (function (i) { // "this" keyword now refers to this function, it doesn't have "invokeApi" method
            setInterval(function () { // and here "this" becomes another function without the method you need
                this.invokeAPI(list[i].url)
            }, list[i].timer)
        })(i);
    }

最好的解决办法是使用箭头函数：

      for (var i = 0, len = list.length; i < len; i += 1) {
          ((i: number) => {
            setInterval(() => {
                this.invokeAPI(list[i].url);
            }, list[i].timer)
          })(i);
      }

工作示例：https://stackblitz.com/edit/angular-hvkkas?file=src/app/app.component.ts

或者，您可以将“this”存储在变量中以从不同范围调用方法：

    const _self = this;
    for (var i = 0, len = list.length; i < len; i += 1) {
        (function (i) {
            setInterval(function () {
                _self.invokeAPI(list[i].url)
            }, list[i].timer)
        })(i);
    }

【讨论】：