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()循环中定义的两个匹配集上触发click事件，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的管理方式也是如此。

无法clearInterval（）;

2 个答案: