javascript - 调用 setTimeout 时出现 NaN 错误

Question

我正在尝试使用一个调用自身并被计数器破坏的 setTimeout 函数。但是，我不断收到一个 NaN 错误。有人能帮我吗？

<script language="javascript">
    function Tests() {
        this.i = 0;
    }


    Tests.prototype.increment_test = function () {
        if (this.i > 2) {
            return;
        }
        alert(this.i);
        this.i++;

        setTimeout(this.increment_test, 30);
    }

    ta = new Tests();
    ta.increment_test();
</script>

Answer 1

this不会永久绑定到increment_test函数。

您可以this在变量中引用，并在匿名函数中使用它。

var self = this;
setTimeout(function() { self.increment_test()}, 30);

或者您可以使用Function.prototype.bind将调用上下文绑定到函数。

setTimeout(this.increment_test.bind(this), 30);

或者您可以制作一个绑定上下文的小实用程序。

function _bindCtx(fn, ctx) {
    return function() { return fn.apply(ctx); };
}

并这样称呼它。

setTimeout(_bindCtx(this.increment_test, this), 30);

Answer 2

当setTimeout调用一个函数时，它会将其上下文更改为window. 所以，里面increment_test，this不是你想的那样。

你需要这样做：

var self = this;
setTimeout(function(){
    self.increment_test();
}, 30);

Answer 3

从 setInterval 运行函数时，“this”变量中的上下文不是您的对象，而是“window”对象。您需要通过以下方式传递上下文：

setTimeout(this.increment_test.apply(this), 30)

Answer 4

function Tests() {
    this.i = 0;
    // Next line added. I think what it's the best solution because it can 
    // increase the speed and reduce the consumption of resources (memory) 
    // when used with setTimeout()
    this.increment_test = this.increment_test.bind(this);
}


Tests.prototype.increment_test = function () {
    if (this.i > 2) {
        return;
    }
    alert(this.i);
    this.i++;

    setTimeout(this.increment_test, 30);
}

ta = new Tests();
ta.increment_test();