Question

编辑：以下做法不正确。解决方案是将“this”存储在另一个变量中，并在setInterval函数中使用它。见下面的答案。

this.growImage = function() {
        console.log("growImage:" + this.dom.id + "counter:" + this.grow_counter);
        if(this.grow_counter == 0) {
            this.tim_grow = window.setInterval(
                /******* FUNCTION TO BE CALLED BY SETINTERVAL ********/
                function() {
                    this.grow_counter++;
                    console.log("this.growStepByStep(): this.grow_counter = " + this.grow_counter); /*this is displayed as NaN */
                    if(this.grow_counter > this.times) {
                        window.clearInterval(this.tim_grow);
                        this.grow_counter = 0;
                    }
                }
                /******* FUNCTION TO BE CALLED BY SETINTERVAL ********/
            , 
            20);
        }
    }

编辑：以上解决方案不正确。这是行不通的。控制台日志不会“看到”this.grow_counter，而是显示NaN。 this.grow_counter只是一个数值。

注意：此功能在其中使用此功能，因此其他更简单的解决方案也不会这样做。提前致谢！

Answer 1

this回调中未保留setInterval()的值。您必须在setInterval()调用之前将您想要的值保存到另一个变量，并在setInterval()内使用它。

this.growImage = function() {
    console.log("growImage:" + this.dom.id + "counter:" + this.grow_counter);
    if(this.grow_counter == 0) {
        var self = this;
        this.tim_grow = window.setInterval(
            /******* FUNCTION TO BE CALLED BY SETINTERVAL ********/
            function() {
                self.grow_counter++;
                console.log("self.growStepByStep(): self.grow_counter = " + this.grow_counter); /*this is displayed as NaN */
                if(self.grow_counter > this.times) {
                    window.clearInterval(self.tim_grow);
                    self.grow_counter = 0;
                }
            }
            /******* FUNCTION TO BE CALLED BY SETINTERVAL ********/
        , 
        20);
    }
}

或者，如果您仅使用现代浏览器，还可以使用.bind()来操纵this的值，如下所示：

this.growImage = function() {
    function intervalCallback() {
         this.grow_counter++;
         console.log("this.growStepByStep(): this.grow_counter = " + this.grow_counter); /*this is displayed as NaN */
         if(this.grow_counter > this.times) {
            window.clearInterval(this.tim_grow);
            this.grow_counter = 0;
        }
    }

    console.log("growImage:" + this.dom.id + "counter:" + this.grow_counter);
    if(this.grow_counter == 0) {
        this.tim_grow = window.setInterval(intervalCallback.bind(this), 20);
    }
}

Answer 2

Neit是正确的，但要提供更多信息。

您不了解setInterval中的范围。

在你的setInterval中，你已经创建了一个新的范围，'this'只引用了新范围内的东西。他/她建议设置一个变量me = this然后使用me.grow_counter意味着你将外部范围存储在变量'me'中，然后可以在你的setInterval范围内使用（尽管我希望看到一个更好的变量）命名！）。

希望有所帮助。

javascript：setInterval中的“this”问题（再次）

2 个答案: