Can't call setInterval twice

161 Views Asked by At

child element's setInterval stops working when calling the parent element's setInterval. this is how I call setInterval

$.fn.__blink = function(color) {
    self = $(this);
    if (self.attr('data-blinker') == undefined) {
        var blinker = setInterval(function() {
            original_color = self.css('background');
            self.css('background', color).delay(300).queue(function(nxt) {
                self.css('background', original_color);
                nxt();
            });
        }, 1000);
        self.attr('data-blinker', blinker);
    }
    return self;
};

Elements are in a nav menu where child element is a submenu of a menu item

1

There are 1 best solutions below

2
On BEST ANSWER

The problem I can see is you have created self abd original_color as a global variable, so when you call __blink second time the value of original_color may get overriden by the second call

$.fn.__blink = function (color) {
    var self = $(this);
    if (self.attr('data-blinker') == undefined) {
        var blinker = setInterval(function () {
            var original_color = self.css('background');
            self.css('background', color).delay(300).queue(function (nxt) {
                self.css('background', original_color);
                nxt();
            });
        }, 1000);
        self.attr('data-blinker', blinker);
    }
    return self;
};