Question

使用滑块，我注意到一切都很好 -

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

Answer 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添加到对象中，然后在我的动画中使用它来解决问题！

Answer 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);

setinterval和类之间的奇怪交互

2 个答案: