Angular 6 每 X 秒运行一个函数

typescript

Angular 6 中如何每 X 秒运行一个函数

在 Angular 6 中，我们经常需要定期执行某个函数，例如每隔 X 秒刷新数据、更新页面等。本文将向您介绍如何使用 Angular 6 中的内置方法来实现每 X 秒运行一个函数的功能。

首先，我们需要导入 Angular 的内置模块 IntervalObservable 。在您的组件文件中，添加以下代码：

typescript
import { IntervalObservable } from 'rxJS/observable/IntervalObservable';

接下来，您可以在组件的 ngOnInit 生命周期钩子中使用 IntervalObservable 来设置定时器，并指定每隔多少秒执行一次函数。例如，我们希望每 5 秒执行一次名为 myFunction 的函数，可以在 ngOnInit 方法中添加以下代码：

typescript
ngOnInit() {
  IntervalObservable.create(5000) // 5000 毫秒 = 5 秒
    .subscribe(() => {
      this.myFunction();
    });
}
myFunction() {
  // 在这里编写您想要执行的函数代码
}

在上述代码中，我们使用 IntervalObservable.create(5000) 创建了一个每隔 5 秒触发的可观察对象。然后，我们使用 .subscribe() 方法来订阅这个可观察对象，并在每次触发时调用 myFunction 函数。

您可以根据自己的需求修改定时器的时间间隔和要执行的函数。无论您想要定时刷新数据、更新页面内容还是执行其他操作，都可以通过此方法来实现。

示例代码：

typescript
import { Component, OnInit } from '@angular/core';
import { IntervalObservable } from 'rxJS/observable/IntervalObservable';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.CSS']
})
export class MyComponentComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    IntervalObservable.create(5000) // 5000 毫秒 = 5 秒
      .subscribe(() => {
        this.myFunction();
      });
  }
  myFunction() {
    console.log('This function is executed every 5 seconds.');
  }
}

在上述示例代码中，我们创建了一个名为 MyComponentComponent 的组件，并在 ngOnInit 方法中设置了每 5 秒执行一次的定时器。 myFunction 函数简单地打印一条消息到控制台，以演示每隔 5 秒执行一次函数的效果。

通过使用 Angular 6 中的 IntervalObservable，我们可以轻松实现每 X 秒运行一个函数的功能。只需导入 IntervalObservable 模块，设置定时器并订阅可观察对象，即可在指定的时间间隔内执行所需的函数。这使得我们可以轻松实现定时刷新数据、更新页面内容等功能。