DOM更改不在interval函数中执行

Question

我正在使用javascript中的基本警报系统，它使基本的圆形时钟倒计时，然后消失在我正在制作的地图上。

然而，由于我无法弄清楚为什么第11行和第12行在下面的代码块中（用箭头标记）不想做他们的事情，所以我遇到了一个小问题。 / p>

function createTimer(sysID){
    this.IDstore = sysID;
    this.time = 59;
    var self = this;
    document.getElementById('star'+self.IDstore).style.fill="#FF0000";

    this.timer = setInterval(function(){
        document.getElementById('Timer'+self.IDstore).setAttribute('d', updateState(self.time));
        self.time-=1;
        if(self.time<=0){
        ->  document.getElementById('Timer'+self.IDstore).style.visibility="hidden";
        ->  document.getElementById('star'+self.IDstore).style.fill="#FFFFFF";
            clearInterval(self.timer);
        }
    },1000);
    this.stopTime=stopTime;
}

但是，如果我删除 clearInterval 或将它们移出if语句，它们就可以正常工作。但是，只需在执行 clearInterval 之前使它们自行运行，就像在下一个代码块中一样。

function createTimer(sysID){
    this.IDstore = sysID;
    this.time = 59;
    var self = this;
    document.getElementById('star'+self.IDstore).style.fill="#FF0000";
    this.timer = setInterval(function(){
        if(self.time>=0){
            document.getElementById('Timer'+self.IDstore).setAttribute('d', updateState(self.time));
        }else if(self.time>-2){
            document.getElementById('Timer'+self.IDstore).style.visibility="hidden";
            document.getElementById('star'+self.IDstore).style.fill="#FFFFFF";
        }else{
            clearInterval(self.timer);
        }
        self.time-=1;
    },1000);
    this.stopTime=stopTime;
}

很高兴知道为什么以及是否有简单的解决方案。