Ionic 2中如何在Provider定时器结束时调用页面内函数？

你遇到的核心问题是Observable的异步特性，以及Provider和页面组件的解耦逻辑问题。之前的写法里，newTimer()返回的是Observable对象而非同步字符串，所以页面里的if(this.countDown == 'timer complete')会立刻执行（此时定时器还没跑完），自然不会触发endTimer()；另外Provider里的finally(() => this.endT())调用的是Provider自身的方法，和页面的endTimer()没有关联。

下面给你三种可行的解决方案，按需选择：

方法一：在页面订阅Observable时直接处理完成逻辑 #

这是最直观的方式，利用Observable的订阅回调来触发页面函数：

修改后的Provider代码 #

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/timer';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';

export class TimerProvider {
  counter = 100; // 简化1*100的写法
  tick = 1000;

  constructor(public http: HttpClient) {}

  newTimer(): Observable<number> {
    // 使用局部变量保存计数器，避免多次调用时互相干扰
    let localCounter = this.counter;
    return Observable.timer(0, this.tick)
      .take(localCounter)
      .map(() => --localCounter);
  }
}

修改后的页面代码 #

import { TimerProvider } from '../../providers/timer/timer';
import { Subscription } from 'rxjs/Subscription';
import { Component, OnDestroy } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourPage implements OnDestroy {
  private timerSubscription: Subscription;

  constructor(private timerProvider: TimerProvider) {}

  endTimer() {
    console.log('timer ended');
  }

  newTimer() {
    // 先取消之前的订阅，防止内存泄漏
    if (this.timerSubscription) {
      this.timerSubscription.unsubscribe();
    }

    this.timerSubscription = this.timerProvider.newTimer()
      .subscribe(
        (currentCount) => {
          // 这里可以实时更新倒计时显示，比如：
          // this.currentCount = currentCount;
          console.log('剩余时间：', currentCount);
        },
        (error) => console.error('定时器出错：', error),
        () => {
          // Observable完成时（定时器结束），调用页面的endTimer
          this.endTimer();
        }
      );
  }

  // 页面销毁时必须取消订阅，避免内存泄漏
  ngOnDestroy() {
    this.timerSubscription?.unsubscribe();
  }
}

方法二：给Provider传入回调函数 #

如果希望由Provider来控制回调时机，可以在调用newTimer时把页面函数作为参数传入：

修改后的Provider代码 #

export class TimerProvider {
  counter = 100;
  tick = 1000;

  constructor(public http: HttpClient) {}

  newTimer(onComplete?: () => void): Observable<number> {
    let localCounter = this.counter;
    return Observable.timer(0, this.tick)
      .take(localCounter)
      .map(() => --localCounter)
      .finally(() => {
        // 定时器结束时执行传入的回调
        onComplete?.();
      });
  }
}

修改后的页面代码 #

newTimer() {
  this.timerSubscription?.unsubscribe();
  
  this.timerSubscription = this.timerProvider.newTimer(() => {
    // 直接调用页面的endTimer
    this.endTimer();
  }).subscribe(currentCount => {
    console.log('剩余时间：', currentCount);
  });
}

方法三：用Subject实现事件通知（适合多组件监听场景） #

如果你的应用需要多个组件监听定时器结束事件，可以用Subject发布事件，页面订阅该事件：

修改后的Provider代码 #

import { Observable, Subject } from 'rxjs';
import 'rxjs/add/observable/timer';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/map';

export class TimerProvider {
  counter = 100;
  tick = 1000;
  private timerComplete$ = new Subject<void>();

  // 暴露给外部订阅的Observable（防止外部直接调用next）
  get timerComplete(): Observable<void> {
    return this.timerComplete$.asObservable();
  }

  constructor(public http: HttpClient) {}

  newTimer(): Observable<number> {
    let localCounter = this.counter;
    return Observable.timer(0, this.tick)
      .take(localCounter)
      .map(() => --localCounter)
      .finally(() => {
        this.timerComplete$.next();
      });
  }
}

修改后的页面代码 #

export class YourPage implements OnDestroy {
  private timerSubscription: Subscription;
  private completeSubscription: Subscription;

  constructor(private timerProvider: TimerProvider) {
    // 订阅定时器完成事件
    this.completeSubscription = this.timerProvider.timerComplete.subscribe(() => {
      this.endTimer();
    });
  }

  newTimer() {
    this.timerSubscription?.unsubscribe();
    this.timerSubscription = this.timerProvider.newTimer().subscribe(currentCount => {
      console.log('剩余时间：', currentCount);
    });
  }

  endTimer() {
    console.log('timer ended');
  }

  ngOnDestroy() {
    this.timerSubscription?.unsubscribe();
    this.completeSubscription?.unsubscribe();
  }
}

补充：为什么之前的写法不生效？ #

1. 异步特性：this.timerProvider.newTimer()返回的是Observable对象，不是同步字符串，所以页面里的if(this.countDown == 'timer complete')会立刻执行，此时定时器还未结束，判断永远不成立。
2. 作用域问题：Provider里的finally(() => this.endT())调用的是Provider自身的endT()方法，返回的字符串不会传递给页面的订阅者，因为finally操作符不修改Observable的返回值。

内容的提问来源于stack exchange，提问作者astrakid932