Angular 6 每 X 秒运行一个函数

Posted 2023-03-13

【中文标题】Angular 6 每 X 秒运行一个函数

【英文标题】：Angular 6 run a function in every X seconds

【发布时间】：2019-03-11 07:10:11

【问题描述】：

我有一个函数叫

opensnack(text) ... ;

使用给定的文本输入打开一个angular material snackbar。

我想要做的是每隔 10 秒调用一次这个函数。

我应该怎么做？

【问题讨论】：

到目前为止你尝试了什么？

@SiddAjmera ***.com/questions/50585764/… 我正在尝试这些，但还不能让它工作

【参考方案1】：

使用来自rxjs的interval

方法如下：

import  interval, Subscription  from 'rxjs';

subscription: Subscription;

...

//emit value in sequence every 10 second
const source = interval(10000);
const text = 'Your Text Here';
this.subscription = source.subscribe(val => this.opensnack(text));

...

ngOnDestroy() 
  this.subscription.unsubscribe();

或者，您可以使用 setInterval 作为 Window 对象上的方法。所以你不需要导入任何东西来使用它。

intervalId = setInterval(this.opensnack(text), 10000);

...

ngOnDestroy() 
  clearInterval(this.intervalId);

这里有一个SAMPLE STACKBLITZ 供您参考。

【讨论】：

我需要导入一些东西才能使用 SetTimeout 吗？因为它给了我一些这样的错误

我的错，这是一个错字。我的意思是setInterval 因为它可以作为 Window 对象上的 API 使用，所以你不需要导入任何东西来使用它。

也许我隐瞒了什么，但似乎没有用。可以请教一下吗？ stackblitz.com/edit/angular-enzk8t

刚刚为您的参考添加了一个示例 Stackbliz。请看看它，让我知道这是否适合你。请务必仔细阅读 cmets :)

@hellmit100，如果您将回调参数设置为箭头函数，它将起作用。 () => this.addNum() stackblitz.com/edit/angular-bgb963?file=src/app/…

【参考方案2】：

您可以利用rxjs 库每 X 秒运行一次函数。

import  interval  from 'rxjs';
import  takeWhile  from 'rxjs/operators';

...

 interval(1000)
    .pipe(takeWhile(() => !stop))
    .subscribe(() => 
      // place you code here
    );

上面的代码sn-p会每1秒执行一次订阅的语句，直到stop条件设置为真。

【讨论】：

从'rxjs'导入间隔；从 'rxjs/operators' 导入 takeWhile ；构造函数() this.createNewFutureCostingSNotifier(); 公共 createNewFutureCostingSNotifier() console.log('createNewFutureCostingSNotifier()'); interval(1) .pipe(takeWhile(() => false)) .subscribe(() => console.log('createNewFutureCostingSNotifier() 正在工作！'); );但不工作。

@RejwanulReja 您已将停止条件直接设置为 false

【参考方案3】：

尝试使用setInterval

setInterval 将允许定期运行函数，运行之间的间隔

https://javascript.info/settimeout-setinterval

示例：

function opensnack(text: string) : void 
  console.log(text);


setInterval(opensnack, 10000, "my text"); <-- run every 10 second

你可以看看这个stackblitz example：

【参考方案4】：

Angular 6 每 X 秒运行一次函数

import  Component, OnInit  from '@angular/core';
import  Observable  from 'rxjs';

@Component(
    selector: 'my-app',
    template: `<h2>
      Now time | date: 'hh:mm:ss'
      
      <hr /> 
      Now time$ | async | date: 'hh:mm:ss'
    </h2>`
)
export class AppComponent 
  time: Date;
  time$;

  constructor() 
    // First way: manual subscribe
    Observable
      .interval(1000)
      .map(() => new Date())
      .subscribe(res => this.time = res)

    // Angular way: by using the `async` pipe
    this.time$ = Observable.interval(1000).map(() => new Date())
  

【参考方案5】：

export class AComponent implements OnInit 
  id: string = "1";
  mySub: Subscription;

  constructor(private http: HttpClient) 
    this.mySub = interval(8000).subscribe((func => 
      this.onIdSelect(this.id);
    ))
      
  ngOnInit(): void 
  
  onIdSelect(id) 
    this.http.post('https://jsonplaceholder.typicode.com/posts', id).subscribe((res => 
      console.log(res);
    ))
    // this.mySub.unsubscribe(); 
  

从rxjs 导入时间间隔和订阅。 在这里，代码每8seconds 调用一次onIdSelect() 方法。因此，每个8seconds 之后都会在控制台上打印发布响应。如果您只想在8seconds 之后调用该方法一次，则只需取消订阅mySub 变量即可。