Javascript打字機效果暫停/停止按鈕

Question

我已經在下面的這個腳本允許我點擊按鈕時播放帶有類型編寫器效果的文本。但是，如何改變允許我暫停的代碼，或者在再次單擊按鈕時停止腳本。

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

得到它的工作，只是添加了一些變量，並實現了停止和暫停功能，只是我改變的代碼塊在這裏顯示：

<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; 
} 

玩得開心！

Answer 2

一些注意事項：

• 上一致的壓痕做功來提高代碼的可讀性
• 你不需要前綴的功能執行時請致電javascript:婷Javascript代碼
• 你應該避免evaling文本字符串作爲setTimout呼叫，使用a closure代替
• 儘量不要混用jQuery和原始DOM操作，除非在非常具體的性能的原因

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'); 
    } 
});