Question

我正在使用以下函数来启动和停止旋转。基本上我试图添加一个Autospin按钮并尝试下面的方法，但它不工作。启动功能正在工作，但停止不工作。

var nIntervId;
this._onAutoSpin = function(){
  s_oGame.onSpin();
  nIntervId = setInterval(this._onAutoSpin, 10 * 1000);
};

this._offAutoSpin = function(){
  clearInterval(nIntervId);
};

Answer 1

问题是因为你每次触发都会以递归的方式开始新的间隔，所以你只能停止最新的计时器，而不是之前的计时器。

要修复此更改您的逻辑，以便没有可能的递归，并且只有一个间隔在运行：

function Foo() {
  var nIntervId;

  this._onAutoSpin = function() {
    nIntervId = setInterval(this._doAutoSpin, 1 * 1000); // modified for demo
  }

  this._doAutoSpin = function() {
    console.log('spinning...');
  };

  this._offAutoSpin = function() {
    console.log('stopped');
    clearInterval(nIntervId);
  };
}

var foo = new Foo();
foo._onAutoSpin();

setTimeout(foo._offAutoSpin, 5000); // stop after 5 seconds

如果您想以递归方式执行此操作，则需要使用setTimeout()。您还需要缓存this引用，以便在连续调用中保持它：

function Foo() {
  var nIntervId;

  this._onAutoSpin = function() {
    var _this = this;
    
    console.log('spinning...');
    nIntervId = setTimeout(function() {
      _this._onAutoSpin();
    }, 1 * 1000); // modified for demo
  }

  this._offAutoSpin = function() {
    console.log('stopped');
    clearInterval(nIntervId);
  };
}

var foo = new Foo();
foo._onAutoSpin();

setTimeout(foo._offAutoSpin, 5000); // stop after 5 seconds

Answer 2

尝试使用setTimeout代替setInterval，因为setInterval每次都会创建一个新的计时器而不会破坏最后一个计时器。

var nIntervId;
this._onAutoSpin = function(){
  s_oGame.onSpin();
  nIntervId = setTimeout(this._onAutoSpin, 10 * 1000);
};

this._offAutoSpin = function(){
  clearTimeout(nIntervId);
};

调用函数onclick start并onclick stop

2 个答案: