javascript中对象内部的setInterval

我正在尝试使用以下代码制作计时器条：

var timer =  {
    elem: document.getElementById("myBar"),
    width:0,
    startTimer: setInterval(this.addWidth, 10),
    addWidth : function() {
        this.width += 0.01;
        this.elem.style.width = this.width + '%';
    },
    stopTimer: function() {
        clearInterval(this.startTimer);
        showModal();
    }
}

这是html

var newHtml =   '<div id="myProgress">' +
                '<div id="myBar">' +
                '<div id="label"></div>' +
                '</div>' +
                '</div>';

---

但是，setInterval（）似乎不起作用

如果要执行

setTimer

属性中的代码，必须将其包装在函数中：

startTimer: function(){ setInterval(this.addWidth, 10) };

然后你会用以下方式来称呼它：

timer.startTimer(); // Note the parenthesis?

语句末尾的括号表示要执行存储在属性中的函数

---

现在，您有一个简单的属性，用于存储从

setInterval

调用返回的整数。

看起来您的意思是将

startTimer

设置为函数引用，但实际上是调用

setInterval

并将

startTimer

设置为它返回的任何值

你可以试试

startTimer: function () {setInterval(this.addWidth, 10);},

---

“this”在javascript中是一个棘手的问题。您可能需要读取setInterval（函数（）{this.addWidth（）；}，10）；这将防止您丢失addWidth函数中“This”的上下文。我投票赞成重新打开，因为

这

不是这里的主要问题。而且，到目前为止，答案并没有真正解决这个问题的一个重要方面，如果没有保留间隔id的额外变量，startTimer和stopTimer将无法按预期工作。到目前为止，

this.addWidth

用作间隔id，这是错误的，间隔id仅由

setInterval

返回，我认为需要做一些额外的工作才能使其正常工作。@hack3rfx-该代码与OP的代码完全没有共同之处，甚至没有使用对象文字。

startTimer: function () {setInterval(this.addWidth, 10);},