Javascript Typewriter effect PAUSE/STOP button

Question

I've this script below allows me to play the text with a type writer effect when the button is clicked. But how can I change the code that allow me the pause or stop the script when the button is clicked again.

HTML

     <div ID="textDestination" class="news"></div>
     <div class="play" id="playbtn"></div>

JavaScript

  var text="I remember the big tree in Mums yard I used to climb when they were drinking. I remember sitting up there crying cause I knew I’d have to get down, and how the look on his face made me want to laugh, how small he looked from up there. I remember he would threaten to throw things at me if I didn't get down. He knew he had no power over me up there, but he also knew eventually I would have to get down. Then he would say I was in for it whether I came down or not. But up there I was untouchable, and the world outside our house held endless possibility."

  var delay=50;
  var currentChar=1;
  var destination="[none]";
  function type()
  {
      //if (document.all)
      {
    var dest=document.getElementById(destination);
    if (dest)// && dest.innerHTML)
    {
        dest.innerHTML=text.substr(0, currentChar)+"_";
        currentChar++;
        if (currentChar>text.length)
        {
            currentChar=1;
            setTimeout("type()", 5000);
        }   
        else
        {
            setTimeout("type()", delay);
        }
         }
     }
 }
 function startTyping(textParam, delayParam, destinationParam)
 {
   text=textParam;
   delay=delayParam;
   currentChar=1;
   destination=destinationParam;
   type();
 }

 $('#playbtn').click(function() {
 javascript:startTyping(text, 50, "textDestination");
 });

Answer 1

Some notes:

• Work on a consistent indentation to improve your code readability
• You do not need to prefix a function call with javascript: when executing Javascript code
• You should avoid evaling a text string as a setTimout call, use a closure instead
• Try not to mix jQuery and raw DOM manipulation unless for a very specific performance reason

http://jsfiddle.net/hhk67/5/

var text = "I remember the big tree in Mums yard I used to climb when they were drinking. I remember sitting up there crying cause I knew I’d have to get down, and how the look on his face made me want to laugh, how small he looked from up there. I remember he would threaten to throw things at me if I didn't get down. He knew he had no power over me up there, but he also knew eventually I would have to get down. Then he would say I was in for it whether I came down or not. But up there I was untouchable, and the world outside our house held endless possibility.";
var delay = 50;
var currentChar = 1;
var destination = "[none]";
var typeTimer = null;
var typing = true;

function type(tick)
{
    var dest = document.getElementById(destination);

    if (!typing) return;

    if (dest)
    {
        dest.innerHTML=text.substr(0, currentChar)+"_";
        currentChar++;

        if (currentChar > text.length) 
        {
            currentChar = 1;
            tick = 5000;
        }

        typeTimer = setTimeout(function() { type(delay); }, tick);
    }
}

function startTyping(textParam, delayParam, destinationParam)
{
    if (currentChar > 1) {
        typing = true;
        return type();
    }

    text=textParam;
    delay=delayParam;
    currentChar=1;
    destination=destinationParam;
    type(delay);
}

function pauseTyping()
{
    typing = false;
}

$('#control').click(function() {
    if ( $(this).hasClass('play') ) {
        startTyping(text, 50, "textDestination");

        $(this)
            .attr('class', 'pause')
            .text('Pause');
    } else {
        pauseTyping();

         $(this)
            .attr('class', 'play')
            .text('Play');
    }
});

Answer 2

Got it working, just added a few variables and implemented stop and pause functions, just the code blocks that I changed shown here:

<input type="button" class="pause" id="pausebtn" onclick="stop()" value="Pause" />
<input type="button" class="stop" id="stopbtn" onclick="pause()" value="Stop" />

var stopped=false;
var paused=false;

function type(){
    if(stopped==true){
        return;
    }

....

function startTyping(textParam, delayParam, destinationParam){
    text=textParam;
    delay=delayParam;
    if(paused==true){
        paused=false;
        currentChar=1;
    }

....

function start(){
dest=document.getElementById(destination);
stopped=false
console.log("jhi");
startTyping(text, 50, "textDestination");
}
function pause(){
paused=true;
stopped=true;
}
function stop(){
stopped=true;
}

Have fun!