Как остановить анимацию при клике на ссылку 2.0?

Question

Сергей Гурджиян @mrKorg

web developer

JavaScript

Как остановить анимацию при клике на ссылку 2.0?

Есть такая анимация чата в табах. При переключении с таба та таб в котором уже началась анимация, но не закончилась, происходит сбой. Как остановить анимацию в закрытом табе?
Не могу придумать как прерывать уже запущенный setTimeout для всех кроме активного. Каким методом лучше это сделать?
Но в браузере анимация ещё повторяется по кругу, у тут нет.

// Tabs
$(".tabgroup > div, .tabgroup .massage").hide();
$(".tabs a").click(function(e) {

  // Tabs
  e.preventDefault();
  var $this = $(this),
    tabgroup = "#" + $this.parents(".tabs").data("tabgroup"),
    others = $this.closest("li").siblings().children("a"),
    target = $this.attr("href"),
    massage = $(target).find(".massage"),
    massageLenght = massage.length,
    link = $(this).data("num");
  others.removeClass("active");
  $this.addClass("active");
  $(tabgroup).children("div").hide().removeClass("active");
  $(tabgroup).find(".massage").hide();
  $(target).show().addClass("active");

  // Massage animation
  $(massage).each(function(i) {
    $(this).delay((i++) * 1000).show(300);
    $(".massageList, .custom-scroll_inner").animate({
      scrollTop: 9999
    }, 1000);
  });

  // Next tab
  var autoTab = function() {
    if ($this.parents("li").hasClass("last")) {
      $(".tabs li:first-of-type").find("a").click();
    } else {
      $this.parents("li").next().find("a").click();
    }
  };
  setTimeout(autoTab, massageLenght * 1000);

  // Stop other massage animation
  if (target == "#tab1") {
    $("#tab2 .massage, #tab3 .massage, #tab4 .massage").stop();
  } else if (target == "#tab2") {
    $("#tab1 .massage, #tab3 .massage, #tab4 .massage").stop();
  } else if (target == "#tab3") {
    $("#tab1 .massage, #tab2 .massage, #tab4 .massage").stop();
  } else if (target == "#tab4") {
    $("#tab1 .massage, #tab2 .massage, #tab3 .massage").stop();
  }
});
// Auto show first
$(".tabs li:first-of-type a").click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabgroup" id="first-tab-group">
  <div id="tab1" style="display: none;">
    <div class="massageList scrollbar-inner">
      <div class="massage">Tab 1 massage 1</div>
      <div class="massage">Tab 1 massage 2</div>
      <div class="massage">Tab 1 massage 3</div>
      <div class="massage">Tab 1 massage 4</div>
    </div>
  </div>
  <div id="tab2" style="display: none;">
    <div class="massageList scrollbar-inner">
      <div class="massage">Tab 2 massage 1</div>
      <div class="massage">Tab 2 massage 2</div>
      <div class="massage">Tab 2 massage 3</div>
    </div>
  </div>
  <div id="tab3" style="display: none;">
    <div class="massageList scrollbar-inner">
      <div class="massage">Tab 3 massage 1</div>
      <div class="massage">Tab 3 massage 2</div>
      <div class="massage">Tab 3 massage 3</div>
      <div class="massage">Tab 3 massage 4</div>
      <div class="massage">Tab 3 massage 5</div>
    </div>
  </div>
  <div id="tab4" style="display: none;">
    <div class="massageList scrollbar-inner">
      <div class="massage">Tab 4 massage 1</div>
      <div class="massage">Tab 4 massage 2</div>
      <div class="massage">Tab 4 massage 3</div>
    </div>
  </div>

  <ul class="tabs" data-tabgroup="first-tab-group">
    <li>
      <a href="#tab1" class="active">Tab 1</a>
    </li>
    <li>
      <a href="#tab2">Tab 2</a>
    </li>
    <li>
      <a href="#tab3">Tab 3</a>
    </li>
    <li>
      <a href="#tab4"> Tab 4</a>
    </li>
  </ul>
</div>