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 正在增加，但它的速度太快且统一率，如果每次调用 timeoutFunction 中的 setTimeout 在每次调用时间增加后都被设置，那么它就不是这样工作的。

Answer 1

稍微重构了您的代码，使其与this与_this在函数中的使用保持一致。从传递到 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();