如何在 Angular 2 中每 10 秒调用一个函数？

Question

如何在 Angular 中的设定时间间隔内调用函数 2. 我希望它在特定时间间隔（例如 10 秒）内为 called/Triggered。例如： ts 文件

num: number = 0;
array: number[] = [1,5,2,4,7];
callFuntionAtIntervals(){
    if(num==5){
        num=0;    
    }
    num++;
}

HTML:

<div>{{ array[num] }}</div>

所以基本上 div 值会每隔一段时间发生变化

Answer 1

Observable.interval(10000).takeWhile(() => true).subscribe(() => this.function());

每 10 秒 function() 被调用一次的无限循环

Answer 2

您也可以试试传统的setInterval函数。

setInterval(() => {
    this.callFuntionAtIntervals();
}, 1000);

Answer 3

在您的 TS 逻辑中，定义一个基于 "interval" 的可观察对象，它将发出值 0, 1, 2, 3, 4, 0, 1, ...

this.index = Observable.interval(10000).map(n => n % this.array.length);

在您的组件中，使用 async 展开该可观察对象并将其用于索引到数组中。

{{array[index | async]}}

Answer 4

请查看下方内容，可能会对您有所帮助，

我的要求：就像每 5 秒需要调用一个服务，如果我们返回所需的数据，我们需要停止调用该服务并继续下一个流程。否则 5 秒后再次呼叫服务。

停止服务调用的条件类似于最大重试次数（在我的情况下为 20 次）或特定时间（在我的情况下为 120 秒）之后。

注意：我在打字稿中使用

let maxTimeToRetry = 120000;  // in ms
let retryCount = 0;
let retryTimeout = 5000; // in ms
let maxRetries = 20;
const startTime = new Date().getTime();

// Need to use self inside of this, inside setInterval method;

const interval = setInterval(function () {
    retryCount++;  // INCREMENT RETRY COUNTER
    self.service.getData(requestParams).subscribe(result => {
      if (result.conditionTrue) {
        clearInterval(interval); // to stop the timer or to stop further calling of service
        //any execution after getting data
      }
    });

    if ((new Date().getTime() - startTime > maxTimeToRetry) || (retryCount === maxRetries)) {
      clearInterval(interval);
      // any execution 
    }

  }, retryTimeout);

如何在 Angular 2 中每 10 秒调用一个函数？

How do I call a function in every 10 seconds in Angular 2?

typescript

angular2-template

angular