javascript - 调用函数 onclick start 和 onclick stop

Question

我正在使用以下功能来启动和停止旋转。基本上我正在尝试添加一个自动旋转按钮并尝试了以下方法但它不起作用。启动功能正在运行但停止不起作用。

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