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在每次调用后增加了一段时间后就会启动。

Answer 1

稍微重新考虑您的代码，使其与函数中this vs _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();

Answer 2

setTimeout想要一个内联函数作为它的回调。改变这个：

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

对此：

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

有javascript对象范围和setTimeout的问题？

2 个答案: