title: How can I prevent the text from truncating when different tabs are clicked in succession?
body: <p>So I have a type writer effect, that responds to the click of the tab.  Once the tab is clicked the content box changes and begins the typing effect and the corresponding tab changes as well.  However if I were to click on a tab, say tab 1 then tab 2, then back to tab 1 in rapid succession or even moderate succession, the text of the content box ends abruptly and the type effect doesn't print out all the text.</p>
  
  <pre><code>$(document).ready(function () {
      $('div#tab-wrapper div.myTabs').click(function () {
          var tab_id = $(this).attr('data-tab');
          $('div.content').removeClass('current');
          $(this).addClass('current');
          $("#" + tab_id).addClass('current');
          typeWriterEffect(tab_id, document.getElementById(tab_id).innerHTML, 50);
      });
  });
  
  var timer;
  
  function typeWriterEffect(id, sentence, speed) {
      var index = 0; //reset index
      clearInterval(timer); //clear old timer
      document.getElementById(id).innerHTML = ""; //clear it immediately to prevent flicker on click
      timer = setInterval(function () {
          var char = sentence.charAt(index);
          if (char === '&lt;') index = sentence.indexOf('&gt;', index);
          document.getElementById(id).innerHTML = sentence.substr(0, index);
          index++;
          if (index === sentence.length) {
              clearInterval(timer);
          }
      }, speed);
  }
  </code></pre>
  
  <p>I figured I could store the innerHTML text into the data() method, but that didn't seem to work or maybe I did it wrong, same results.  </p>
  
  <p>So anyway, here is a <a href="http://jsfiddle.net/7V4NA/30/" rel="nofollow">JSFiddle</a> of everything I just talked about. </p>