Angular2计时器进入无穷大

Question

update ：plunkr链接：https：//plnkr.co/edit/nklupwh3ynhrpjvyoyde?p=info

我要做的事情：在我的模板上，我将三个列表中的三个列中的图标填充一秒钟。为此，我的组件中有三个图标列表。还有一些其他条件，可以在特定级别和特定级别的特定级别上更改图标的颜色。start（）在 start 按钮上调用，它调用处理图标总体逻辑的iterator（）。计时器应停止列表中的图标完成或用户单击停止按钮时。

Iterator（）函数i有一个计时器，该计时器每两秒钟调用相同的函数。当所有数组项目涵盖时，计时器应停止，但它无法正常工作。

我的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();    
});

是您的问题来自的地方。

您订阅，订阅并再次订阅。

订阅保持开放。这不是一件事。因此，您应该对代码进行重新处理以考虑在内。

根据您在（删除）答案中提出的内容进行编辑：

我创建了一个plunkr，每秒显示一个图标列表（font-awesome）：http://plnkr.co/edit/3uvp4359nqudjm6vlqjp?p=preview

让我知道您是否正在寻找类似的东西。

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!'
            }