无法clearInterval()；

Question

我用的是setInterval，我似乎搞不清楚。我完全不知道为什么会这样：

function Slider(element) {

  this.i = 0;

  this.element = element;

  var self = this;

  this.timer = window.setInterval(function() {
    console.log(self.timer);
    switch (self.i) {
      case 0:
        element.velocity({
          translateX: "-33.333333%"
        }, {
          duration: 750,
          delay: 4000
        }, "easeOut");
        $('.multi-nav .active').removeClass("active");
        $('.multi-nav .0').addClass("active");
        self.i++;
        break;
      case 1:
        element.velocity({
          translateX: "-66.666666%"
        }, {
          duration: 750,
          delay: 4000
        }, "easeOut");
        $('.multi-nav .active').removeClass("active");
        $('.multi-nav .1').addClass("active");
        self.i++;
        break;
      case 2:
        element.velocity({
          translateX: "0%"
        }, {
          duration: 750,
          delay: 4000
        }, "easeInQuart");
        $('.multi-nav .active').removeClass("active");
        $('.multi-nav .2').addClass("active");
        self.i = 0;
        break;
    }
  }, 5000);
}

Slider.prototype.stop = function() {
  window.clearInterval(this.timer);
  console.log(this.timer);
}

var id = 0;
var name = "slider_";
$(".multi").each(function() {
  uniqueName = name + id;
  window[uniqueName] = new Slider($(this));
  id++;
});


$(".multi-nav a").click(function(e) {
  e.preventDefault();

  // Stopping the object running on this object.
  var id = $(this).parent().attr("class").split(" ").pop();
  uniqueName = name + id;
  window[uniqueName].stop();
});

单击的元素的父元素包含相关的类编号。我抓取并附加到名称上，以便正确地获取对象。

我的问题似乎与我如何阻止它有关。即使我去浏览器，并使用对象的正确名称，并尝试并.stop();它，什么都不会发生。如果我使用对象名并.timer它，我会得到一个随机数。

你知道我怎么才能让我的时间间隔正常吗？

更新

经过更多的实验，似乎我手动地停止了这两个对象，它们都停止了。但是，如果只停止一次，动画就会继续进行。知道为什么会这样吗？

我玩过替代html，在那里只有一个滑块，它的工作方式如预期。但是，只要有两个或两个以上的滑块，所有滑块都必须在任何一个滑块停止之前运行.stop()方法，在这种情况下，所有滑块都会运行。这显然不是目的所在。

更新2

在相同的html结构中，如果我像在.each()循环中定义的那样在两个匹配集上触发单击事件，那么对于这两个匹配集，setInterval都会结束。为什么对于单个对象它不会结束呢？

Answer 1

尝试全局声明计时器处理程序。

​

var timer = null;

function Slider(element) {

  this.i = 0;

  this.element = element;

  var self = this;

  timer = window.setInterval(function() {
    console.log(timer);
    switch (self.i) {
      case 0:
        element.velocity({
          translateX: "-33.333333%"
        }, {
          duration: 750,
          delay: 4000
        }, "easeOut");
        $('.multi-nav .active').removeClass("active");
        $('.multi-nav .0').addClass("active");
        self.i++;
        break;
      case 1:
        element.velocity({
          translateX: "-66.666666%"
        }, {
          duration: 750,
          delay: 4000
        }, "easeOut");
        $('.multi-nav .active').removeClass("active");
        $('.multi-nav .1').addClass("active");
        self.i++;
        break;
      case 2:
        element.velocity({
          translateX: "0%"
        }, {
          duration: 750,
          delay: 4000
        }, "easeInQuart");
        $('.multi-nav .active').removeClass("active");
        $('.multi-nav .2').addClass("active");
        self.i = 0;
        break;
    }
  }, 5000);
}

Slider.prototype.stop = function() {
  window.clearInterval(timer);
  console.log(timer);
}

var id = 0;
var name = "slider_";
$(".multi").each(function() {
  uniqueName = name + id;
  window[uniqueName] = new Slider($(this));
  id++;
});


$(".multi-nav a").click(function(e) {
  e.preventDefault();

  // Stopping the object running on this object.
  var id = $(this).parent().attr("class").split(" ").pop();
  uniqueName = name + id;
  window[uniqueName].stop();
});

​

Answer 2

为什么要使用setInterval。在大多数情况下，使用setTimeout会导致需要保留句柄。让被调用的函数决定是否需要一个新的定时调用。

function MyTimedObject() {
  this.stop = false; // flag to stop timeout
  var timed = function() { // timed function
    if (this.stop) {
      this.stop = false; // clear the stop flag ready if needed again
      return;
    }

    //... code does its thing ...

    // schedule next time
    setTimeout(this.timedFunc, 5000);
  }

  this.timedFunc = timed.bind(this); // bind the timed function to this;
}

var obj = new MyTimedObject();
// to start the timed function
obj.timedFunc();

// to stop it
obj.stop = true; // yes the timeout is still active 
// but it will do nothing when it does execute

// to restart it
if (!obj.stop) { // make sure it has stopped;
  obj.timedFunc();
} else {
  obj.stop = false; // just let it continue
}

虽然并不适合于所有情况，但我发现这种方法更易于管理，并且是如何管理requestAnimationFrame的。