Question

更新：Plunkr链接：https://plnkr.co/edit/NkLUPWH3yNHrPjvYoYdE?p=info

我想做什么：在我的模板上，我在三个列中依次填充三个列中的图标。为此，我的组件中有三个图标列表。还有一些其他条件可以在特定级别和特定级别更改图标的颜色。在 start 按钮单击时调用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
        }

}

不知何故，这段时间不会停止并进入无限远。我做错了什么？

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

            }

angular2计时器进入无限远

2 个答案: