javascript - javascript 对象范围和 setTimeout 遇到问题？

Question

我有一些遵循以下结构的代码：

function = roulette(){

    _this = this;
    this.spin = spin;
    this.timeoutFunction = timeoutFunction;

    this.object1 = {
        x : 0
    }

    function spin(){
        if (typeof this.shuffleTimer !== 'undefined') {
            clearTimeout(_this.shuffleStart);
        }
        this.shuffleStart = setTimeout(_this.timeoutFunction(), _this.object1.x);
    }

    function timeoutFunction(){
        this.object1.x += 5;
        //do some DOM manipulation here
        console.log(_this.object.x);
        if(this.object1.x < 5000){
          this.shuffleStart = setTimeout(_this.timeoutFunction(), _this.object1.x);
        }
    }
}

它绝对没有按预期工作 - 虽然console.log日志this.object1.x正在增加，但它的速度太快且速度均匀，如果setTimeout在timeoutFunction每个时间增加后触发in ，这不是它的工作方式它被调用的时间。

Answer 1

稍微重构了您的代码，使其与thisvs _thisinside functions的使用保持一致。从传递给. ()_setTimeout

一切似乎都按您的预期工作。

function Roulette() {
    var _this = this;
    this.object1 = {
        x: 0
    };
    this.spin = function spin() {
        if (undefined !== this.shuffleTimer) clearTimeout(this.shuffleStart);
        this.shuffleStart = setTimeout(this.timeoutFunction, this.object1.x);
    };
    this.timeoutFunction = function timeoutFunction() {
        _this.object1.x += 5;
        console.log(_this.object1.x);
        if(_this.object1.x < 5000){
          _this.shuffleStart = setTimeout(timeoutFunction, _this.object1.x);
        }
    };
}
var r = new Roulette();
r.spin();

Answer 2

setTimeout 希望有一个内联函数作为其回调。改变这个：

 this.shuffleStart = setTimeout(_this.timeoutFunction(), _this.object1.x);

对此：

 var ctx = this;
 this.shuffleStart = setTimeout(function(){ctx.timeoutFunction()}, _this.object1.x);