Question

我尝试创建一个每10秒调用Timer的{{1}}，我使用API call，但问题是它变成了无限循环，即使我推到另一个页面，它仍然加入if条件。

示例：

我在一个方法上调用它来启动10秒API调用

setTimeOut

这是setTimeout(() => { this.onTimeOut(); }, 1000);方法......

onTimeOut()

我已经听说过onTimeOut() { this.ApiCall().then( success => { if(success ['ok'] == 0){ this.navCtrl.push(myPage); } }, error => { console.log(error); }); } setTimeout(() => { this.onTimeOut(); }, 1000); }和Debounce，但我对它们并不熟悉，你能否给我一些提示来做同样的事情？或者，如果这种方式更有效，请继续向我解释为什么它变成循环。

目标是当它加入if并推送页面时，停止计时器。

Answer 1

更好地使用observables

this.sub = Observable.interval(10000)
    .subscribe((val) => { console.log('called'); });

停止使用

this.sub.unsubscribe();

确保使用

导入interval

import 'rxjs/add/observable/interval';

Answer 2

Angular应用程序中比setTimeout更好的解决方案可能是使用Observable。 Observable有一个名为timer的方法，您可以使用这种方式（并且还有一个TimerObservable但我从未使用它，所以我不知道这是否是同一个东西）：

timer = Observable.timer(initialDelay, period);

timer.subscribe(tick => {
   // Your API call, which will be performed every period
});

我鼓励你使用RxJS和Observable来代替你的请求，而不是承诺，它更多地采用Angular方式为我做事，而RxJS是一个非常强大的库。

RxJS Observable doc

Answer 3

以角度方式使用observable.timer。

 export class CurrentRunsComponent implements OnInit, OnDestroy {
  private timer;


  ngOnInit() {
    this.timer = Observable.timer(10000);
    this.timer.subscribe((t) => this.onTimeOut());
  }
   onTimeOut() {
    this.ApiCall().then(
    success => {
    if(success ['ok'] == 0){
        this.navCtrl.push(myPage);
    }
    },
    error => { console.log(error); });
}

   ngOnDestroy(){
    console.log("Destroy timer");

  }
}

Answer 4

setTiimeout没什么问题，这只是代码中的错误。实际上，这是一个无限循环（没有基本条件的递归函数），因为那里没有任何基本条件。

因此，setTimeout将每隔1秒继续调用onTimeOut（），因为它不知道在哪里停止。切换到其他页面时，只需使用基本条件即可完成递归。


No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

app.use(cors({ origin: "http://localhost:3000" }))方法会将标志设置为false，并且递归函数的最后一次调用将不会进入if块内部，并且由于此后没有任何执行，它将返回（以前的状态然后将其从堆栈中清除，将重复执行此过程，直到清除堆栈为止（以前版本的堆栈都将发生同样的事情，该版本现在位于堆栈的顶部，因此可以通过以下方式清除堆栈：一个递归）。

Answer 5

从 RxJS 6 + 中，您只需使用间隔即可。

import { interval } from 'rxjs';

//in 10 seconds do something
interval(10000).subscribe(x => {
    this.myFunctionThatDoesStuff();
});

您可以在间隔中使用Subscription。

import { interval, Subscription} from 'rxjs';
export class intervalDemo{
    mySubscription: Subscription

    constructor(){
    this.mySubscription= interval(5000).subscribe((x =>{
                this.doStuff();
            }));
    }
    doStuff(){
        //doing stuff with unsubscribe at end to only run once
        this.failedRequestSub.unsubscribe();
    }
}

每10秒调用一次函数Angular2

5 个答案: