angular2タイマーは無限に

Question

UPDATE行く私のテンプレートで を私は3つのリストから2番目の別のそれぞれの後に1を3つの列内のアイコンを移入しています。そのために私のコンポーネントには3つのアイコンのリストがあります。特定のレベルと特定のレベルのレベルでアイコンの色を変える他の条件があります。 startボタンクリックでStart（）が呼び出され、アイコンの挿入ロジックを処理するiterator（）が呼び出されます。タイマーは、リストのアイコンが終了したとき、またはユーザーが停止ボタンをクリックしたときに停止する必要があります。

iterator（）関数私は2秒ごとに同じ関数を呼び出すタイマを持っています。タイマーは、すべてのアレイ項目がカバーされているが、正しく機能していないときに停止する必要があります。

マイHTML

<div class="col col1" align="center"> 
     <div class="ionicon1"> 
      <ion-icon name="{{current_symbol_for_list1}}" [ngClass]="{'makeBlue': makeBlue1, 'makeRed': makeRed1}"></ion-icon> 
     </div> 
    </div> 
    <div class="col col2" align="center"> 
     <div class="ionicon2"> 
      <ion-icon name="{{current_symbol_for_list2}}" [ngClass]="{'makeBlue': makeBlue2, 'makeRed': makeRed2}"></ion-icon> 
     </div> 
    </div> 
    <div class="col col3" align="center"> 
     <div class="ionicon3"> 
      <ion-icon name="{{current_symbol_for_list3}}" [ngClass]="{'makeBlue': makeBlue3, 'makeRed': makeRed3}"></ion-icon> 
     </div> 
    </div> 

</div> 

マイコンポーネント

level= 1; 
round=1 
ionicon_class_list=[ 
'alarm', 'android', 'apple', 'radio-button-on', 
'basket', 'beer', 'radio-button-on', 'boat', 
'book', 'bowtie'] 

current_symbol_for_list='' 
current_symbol_for_list1='' 
current_symbol_for_list2='' 
current_symbol_for_list3='' 

myCounter: any; 
i=0; 
length = this.ionicon_class_list.length; 

start(){ 

    this.iterator(this.i) 

} 
iterator(){ 

    if(this.level==1 || this.level==3 || this.level==5 || this.level==6){ 


     /* Handle at Level 1 for all the 3 rounds*/ 
     if(this.level==1 && this.round==1 && this.current_symbol_for_list2=='apple'){ 
      this.makeBlue2=true; 
     } 
     else if(this.level==1 && this.round==1 && this.current_symbol_for_list2=='radio-button-on'){ 
      this.makeBlue2=false 
     } 
     ... 

     /* Middle list will have the 'dot' symbol */ 
     this.current_symbol_for_list2=this.ionicon_class_list[this.i] 
     this.current_symbol_for_list1=this.ionicon_class_fake_list1[this.i] 
     this.current_symbol_for_list3=this.ionicon_class_fake_list2[this.i] 


     if(++this.i<this.length) { 
      console.log("i "+ this.i) 

      /* Implement timer that runs the same iterator function after 1 second*/ 
      this.timer = Observable.timer(1000,2000); 
      this.myCounter = this.timer.subscribe(
       t => { 
        this.iterator();  
       }); 
     } 

     else if(this.i>=this.length){ 
      this.myCounter.unsubscribe(); 
      this.current_symbol_for_list2=null 
      this.current_symbol_for_list1=null 
      this.current_symbol_for_list3=null 
      this.i=0 
     } 

}  

どういうわけか、この時間は停止し、無限大になりません。私は間違って何をしていますか？

Answer 1

あなたがここで何をしようとしてわから

ないが、この：あなたの問題はどこから来ている

this.myCounter = this.timer.subscribe(t => { 
    this.iterator();  
}); 

です。

あなたが購読して購読し、再度購読します。

サブスクリプションは開いたままです。それは一度だけではありません。だからあなたは、あなたのコードを考慮に入れてリファクタリングする必要があります。 http://plnkr.co/edit/3UVP4359nqUdjm6vlQJp?p=preview

が私にしてみましょう：

は私が（フォント素晴らしい）毎秒アイコンのリストを表示Plunkrを、作成した：あなたは（削除）の回答で尋ねたものに基づいて

EDITあなたがそのようなものを探していたかどうかを知ってください。

Answer 2

私は、次のようにタイムアウト付きタイマーを置き換える：

/* Logic to call the iterator() function at every one second */ 
      if(++this.i < this.length){ 
       this.timeoutId = setTimeout(()=>{ 
        this.iterator() 
       }, 1000) 
      } 

      else if(this.i >= this.length){ 

       this.current_symbol_for_list1='' 
       this.current_symbol_for_list2='' 
       this.current_symbol_for_list3='' 
       this.i=0 
       this.disableStart=false 
       this.disableStop=true 
       this.failurePrompt='Zeit abgelaufen! Versuchen Sie es noch einmal!' 

      }