angular2計時器進入無限

UPDATE：Plunkr鏈接：https://plnkr.co/edit/NkLUPWH3yNHrPjvYoYdE?p=info angular2計時器進入無限

我所試圖做的事：在我的模板，我填充圖標分三路從三個表的一個又一個的每個在第二。爲此，我在組件中有三個圖標列表。在特定級別和特定級別中還有其他一些改變圖標顏色的條件。 Start（）被調用開始按鈕單擊並調用處理圖標填充邏輯的iterator（）。當列表中的圖標結束或用戶單擊停止按鈕時，定時器應該停止。

在iterator（）函數中我有一個定時器，每兩秒調用一次相同的函數。計時器應該在所有數組項目都被覆蓋但不能正常工作時停止。

我的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 
     } 

}

不知怎的，這段時間不會停止，並進入無限。我究竟做錯了什麼？

來源

2017-03-07 Nitish

能否請您解釋正是你想達到什麼樣的？我敢肯定有一個簡單的解決方案，但只有代碼在這種情況下並不真正幫助:) – Maxime

我確實用Plunkr更新了我的anwser。讓我知道你對它的看法;） – Maxime

不知道你想在這裏做什麼，但這：

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

是你的問題的根源。

您訂閱，訂閱，並再次訂閱。

訂閱保持打開狀態。這不是一次性的事情。所以你應該重構你的代碼來考慮這一點。

我創建了一個Plunkr，可顯示的圖標的列表（字體真棒）每秒： http://plnkr.co/edit/3UVP4359nqUdjm6vlQJp?p=preview

讓我根據你在（刪除）回答問

編輯知道你是否在尋找類似的東西。

來源

2017-03-07 14:20:12 Maxime

訂閱/取消訂閱必須對迭代調用做任何事情。 –

你有一個觸發'timer'的函數'iterator'。也就是說，當你調用這個函數時，定時器在1秒後開始，並且每2秒鐘滴答一次。但是，在這個計時器中，你調用了相同的功能。其中訂閱。再次。然後再次。然後再次。所以是的，這與迭代調用有關。 – Maxime

順便說一句，當你在每次調用時重新分配你的類變量this.myCounter，你會在這裏丟失許多訂閱，最終會導致內存泄漏。 – Maxime

我換成超時定時器如下：

/* 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!' 

      }

來源

2017-03-07 18:00:23 Nitish

angular2計時器進入無限

回答

相關問題