setinterval 和类之间的奇怪交互答案

【问题标题】：Weird interactions between setinterval, and classessetinterval 和类之间的奇怪交互
【发布时间】：2015-12-24 01:01:12
【问题描述】：

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

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();
});

演示 - http://codepen.io/JordanDWhalen/pen/QjGNYm

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

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();
});

演示 - http://codepen.io/JordanDWhalen/pen/RWoaYR

【问题讨论】：

您应该使用.data 将滑块实例附加到链接元素，而不是“最后一个类名”加上编号的全局window 属性

标签： javascript jquery css oop velocity.js

【解决方案1】：

看起来这是在匹配元素过多时触发动画的问题。因此，需要中断两个间隔，然后才能停止动画。

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-nav." + self.id 将尝试将 ID 匹配为一个类。这怎么能行？
如果您在问题中包含 HTML，也许您的回答会有意义。
你为什么不直接使用$(self).find(".active")和$(self).find("."+self.i)
"self.id" 相当于我在插入具有多类的新 div 或具有 .multi-nav 类的新 div 时设置的类，它也给定了一个分配的数字作为一个类，从零开始，并为它找到的每一个迭代。所以这最终只针对链接到该 id/class 的 HTML。如果您查看我链接的代码笔上的 HTML，它可能更有意义。
任何对理解问题很重要的东西都应该在问题中，而不是在外部站点。请将 HTML 的相关部分从 codepen 复制到问题中。

【解决方案2】：

如果你...

在“.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);

【讨论】：