Strange behaviors when using setinterval with classes

Question

Strange behaviors when using setinterval with classes

Currently working on enhancing a slider functionality, and I have observed that everything is functioning smoothly -

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

Check out the demo here - http://codepen.io/JordanDWhalen/pen/QjGNYm

However, I am currently working on adding animations to toggle classes on the targets of the events that stop the interval:

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

See the updated demo here - http://codepen.io/JordanDWhalen/pen/RWoaYR

javascript jquery css oop velocity.js

Answer 1

Answer №1

Seems like the problem stemmed from the animations triggering on multiple matching elements simultaneously. This caused both intervals to be halted in order for either one to cease animating.

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

By including the .id in the object and using it within my animations, I was able to resolve the issue!

Answer 2

Seems like the problem stemmed from the animations triggering on multiple matching elements simultaneously. This caused both intervals to be halted in order for either one to cease animating.

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

By including the .id in the object and using it within my animations, I was able to resolve the issue!

Answer 3

Answer №2

When implementing the following steps:

call Slider() on the ".multi-wrap" wrappers, instead of the ".multi" elements
locate the ".multi" and ".multi-nav" elements within each wrapper
incorporate the stop functionality in the Slider() function rather than using a .stop() method

You will notice that :

the necessity for this.xxx, properties diminishes in favor of private variables
the reliance on globals diminishes
the requirement for new lessens and invocation becomes simpler.

Your implementation may resemble something like this :

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

Answer 4

When implementing the following steps:

call Slider() on the ".multi-wrap" wrappers, instead of the ".multi" elements
locate the ".multi" and ".multi-nav" elements within each wrapper
incorporate the stop functionality in the Slider() function rather than using a .stop() method

You will notice that :

the necessity for this.xxx, properties diminishes in favor of private variables
the reliance on globals diminishes
the requirement for new lessens and invocation becomes simpler.

Your implementation may resemble something like this :

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

Strange behaviors when using setinterval with classes

Answer №1

Answer №2

Similar questions

Unable to retrieve information using the post method in Express framework

What is the best way to show only the weekdays on the x-axis?

What causes inability for JavaScript to access a property?

Issue with Jquery: Checkbox fails to get checked in Internet Explorer 7

Creating numerous duplicates of a highly nested immutable Object can be done by using a combination of spread operators

The Ajax data was not displayed in the console log, instead an error message was returned stating "http://localhost/IFICSV3/public/sla/sla/getbranch/180 not found"

What is the best way to access data from outside a forEach loop in JavaScript?

Unable to display JSON results in a tabular format

Attempting to align navigation bar in the middle of the page

Unsynchronized Request Sequencing

no visible text displayed within an input-label field

Position the SVG next to the link text in a Bootstrap navbar brand

What is causing the classList function to throw an error: Uncaught TypeError: Cannot read properties of undefined (reading 'classList')?

Unable to apply styling to body element in style.css file when using Node.js

Avoiding code execution by injections in Javascript/Jquery

Locate a specific item in an array using AngularJs based on a key and present its value on the View

Solving the jQuery Enigma: Why the If Statement Fails to Execute

Saving and accessing AJAX XML responses in sessionStorage

Is there a way to keep the input field data in my form in next js persist even after the page refreshes?

Setting up an i18n project in AngularJS