javascript - DOM 更改不在区间函数中执行

Question

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

然而，我遇到了一个小障碍，因为我不明白为什么下面代码块中的第 11 行和第 12 行（用箭头标记）不想做他们的事情。

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;
}

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