Javascript setinterval和类之间奇怪的交互

在滑块上工作，我注意到一切都很好-

function Slider(element) {

    this.i = 0;

    this.element = element;

    var self = this;

    this.timer = window.setInterval(function() {
        switch (self.i) {
            case 0:
                $(element).velocity({ translateX: "-33.3333%" });
                self.i++;
            break;
            case 1:
                $(element).velocity({ translateX: "-66.6666%" });
                self.i++;
            break;
            case 2:
                $(element).velocity({ translateX: "0%" });
                self.i = 0;
            break;
        }
    }, 2000);
}

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

var i = 0;
$(".multi").each( function(){
    label = "label_" + i;
    window[label] = new Slider($(this));
    console.log(window[label]);
    console.log(label);
    console.log(i)
    i++;
});

$(".multi-nav a").click( function(e){
    e.preventDefault();
    number = $(this).parent().attr("class").split(" ").pop();
    label = "label_" + number;
    console.log(label)
    console.log(window[label]);
    window[label].stop();
});

演示-

在添加动画以切换停止间隔的事件目标上的类之前：

function Slider(element) {

    this.i = 0;

    this.element = element;

    var self = this;

    this.timer = window.setInterval(function() {
        switch (self.i) {
            case 0:
                $(element).velocity({ translateX: "-33.3333%" });
                $(".multi-nav a").velocity({ opacity: ".5" });
                $(".multi-nav ." + self.i).velocity({ opacity: "1" });
                self.i++;
            break;
            case 1:
                $(element).velocity({ translateX: "-66.6666%" });
                $(".multi-nav a").velocity({ opacity: ".5" });
                $(".multi-nav ." + self.i).velocity({ opacity: "1" });
                self.i++;
            break;
            case 2:
                $(element).velocity({ translateX: "0%" });
                $(".multi-nav a").velocity({ opacity: ".5" });
                $(".multi-nav ." + self.i).velocity({ opacity: "1" });
                self.i = 0;
            break;
        }
    }, 2000);
}

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

var i = 0;
$(".multi").each( function(){
    label = "label_" + i;
    window[label] = new Slider($(this));
    console.log(window[label]);
    console.log(label);
    console.log(i)
    i++;
});

$(".multi-nav a").click( function(e){
    e.preventDefault();
    number = $(this).parent().attr("class").split(" ").pop();
    label = "label_" + number;
    console.log(label)
    console.log(window[label]);
    window[label].stop();
});

---

演示-

看起来这是一个在太多匹配元素上触发动画的问题。因此，两个间隔都需要被中断，然后其中一个将停止设置动画

var sliderId = 0;
function Slider(element) {

    this.id = sliderId;
    sliderId++;

    this.i = 0;

    this.element = element;

    var self = this;

    this.timer = window.setInterval(function() {
        switch (self.i) {
            case 0:
                $(element).velocity({ translateX: "-33.3333%" },{delay: 1500, duration: 500 });
                $(".multi-nav." + self.id + " .active" ).removeClass("active");
                $(".multi-nav." + self.id + " ." + self.i).addClass("active");
                self.i++;
            break;
            case 1:
                $(element).velocity({ translateX: "-66.6666%" }, { delay: 1500, duration: 500 });
                $(".multi-nav." + self.id + " .active" ).removeClass("active");
                $(".multi-nav." + self.id + " ." + self.i ).addClass("active");
                self.i++;
            break;
            case 2:
                $(element).velocity({ translateX: "0%" }, {delay: 1500, duration: 500 });
                $(".multi-nav." + self.id + " .active" ).removeClass("active");
                $(".multi-nav." + self.id + " ." + self.i ).addClass("active");
                self.i = 0;
            break;
        }
    }, 2000);
}

将.id添加到对象中，然后在我的动画中利用它修复了这个问题

如果你

• 调用“.multi-wrap”包装器上的

  Slider（）

  ，而不是“.multi”元素
• 在每个包装中查找“.multi”和“.multi-nav”元素
• 在

  Slider（）

  函数中附加停止功能，而不是使用

  .stop（）

  方法

。。。你会发现：

• 对

  this.xxx

  ，属性的需求消失，取而代之的是私有变量
• 对全球化的需求消失了
• 对

  new

  的需求消失了，调用变得更加简单

你可能会得到这样的结果：

function Slider(index, wrapper) {
    var i = 0;
    var $multi = $(wrapper).find(".multi");
    var $multiNav = $multi.siblings(".multi-nav");
    var timer = window.setInterval(function() {
        $multi.velocity({ translateX: ['-33.3333%', '-66.6666%', '0%'][i] });
        $multiNav.velocity({ opacity: '1' });
        $multiNav.find("a").velocity({ opacity: '.5' });
        i = (i + 1) % 3;
    }, 2000);
    $multiNav.find("a").click(function(e) {
        e.preventDefault();
        window.clearInterval(timer);
    });
}
$(".multi-wrap").each(Slider);

---

“.multi-nav.”+self.id

将尝试将id作为类进行匹配。这是怎么回事？如果你在问题中包含HTML，也许你的答案会有意义。你为什么不直接使用

$（self）。find（“.active”）

和

$（self）。find（“.”+self.i）

“self.id”相当于我在插入带有多类的新div或带有.multi-nav类的新div时设置的类，它还指定了一个作为类分配的数字，从零开始，对找到的每个数字进行迭代。因此，这最终只针对链接到该id/类的HTML。如果你看一下我链接的代码笔上的HTML，可能会更有意义。任何对理解问题重要的东西都应该在问题中，而不是在外部网站上。请将HTML的相关部分从代码笔复制到问题中。您应该使用

.data

将滑块实例附加到链接元素，而不是“last classname”加上编号的全局

窗口

属性