Как остановить setInterval для всех each кроме одного?

Question

[Сергей Гурджиян]

Как остановить уже выполняющиеся setInterval кроме активного?
Скрипт выполняет анимацию чата, всплывание сообщений, при переключении таба анимация начинается заново, нужно остановить уже начатые.

// Tabs
    $(".tabgroup > div, .tabgroup .massage").hide();
    $(".tabs a").click(function(e){
        e.preventDefault();
        var $this = $(this),
            tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
            others = $this.closest('li').siblings().children('a'),
            target = $this.attr('href');
        others.removeClass('active');
        $this.addClass('active');
        $(tabgroup).children('div').hide().removeClass("active");
        $(tabgroup).find(".massage").hide();
        $(target).show().addClass("active");
        $(target).each(function(){
            // Show massage
            var tik,
                i = 0,
                massage = $(target).find(".massage"),
                massageLength = massage.length;
            tik = setInterval(function(){
                if (i < massageLength) {
                    $(massage[i]).fadeIn(500);
                    i++;
                    $(".massageList, .custom-scroll_inner").animate({
                        scrollTop: 9999
                    }, 1000);
                } else {
                    clearInterval(tik);
                }
            }, 2000);
        });

    });
    // Auto show first
    $(".tabs li:first-of-type a").click();

Answer 1

[Георгий Еремеев]

// Tabs
	var tik = [];
	$(".tabgroup > div, .tabgroup .massage").hide();
	$(".tabs a").click(function(e){
		e.preventDefault();
		var $this = $(this),
				tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
				others = $this.closest('li').siblings().children('a'),
				target = $this.attr('href');
		others.removeClass('active');
		$this.addClass('active');
		$(tabgroup).children('div').hide().removeClass("active");
		$(tabgroup).find(".massage").hide();
		$(target).show().addClass("active");
		if(tik.length){
			for(var i = 0; i < tik.length; i++){
				if(tik[i]) clearInterval(tik[i]);
			}
			tik = [];
		}
		$(target).each(function(index){
			// Show massage
			var i = 0,
				massage = $(target).find(".massage"),
				massageLength = massage.length;
			tik[index] = setInterval(function(){
				if (i < massageLength) {
					$(massage[i]).fadeIn(500);
					i++;
					$(".massageList, .custom-scroll_inner").animate({
						scrollTop: 9999
					}, 1000);
				} else {
					clearInterval(tik[index]);
				}
			}, 2000);
		});

	});
	// Auto show first
	$(".tabs li:first-of-type a").click();

Comments

[Сергей Гурджиян]

Интересно, но joxi.ru/8AnNnPxFqVG8aA ведь tik-у ни чего не присваивается?

[Георгий Еремеев]

var tik = [];

[Сергей Гурджиян]

Так а как выполнится условие if(tik.length) вне его ни где не определён tik, только внутри условия. Разве не так? И этот код в браузере выдаёт ошибку.

[Георгий Еремеев]

mrKorg: ты код смотрел полностью? tik я вынес за пределы эвента клика, что бы там хранить setInterval, и в будущих событиях останавливать запущенные setInterval-ы. Ответом выше я показал как исправить ошибку.

[Георгий Еремеев]

mrKorg: clearInterval(tik); убери из 6 строки - забыл убрать :D

[Сергей Гурджиян]

Благодарю, Ваш вариант подтолкнул к правильному решению.