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

一些注意事项：

处理一致的缩进以提高代码可读性
执行Javascript代码时，您无需使用javascript:为函数调用添加前缀
您应该避免将文本字符串作为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');
    }
});

Answer 2

让它工作，只添加了一些变量并实现了停止和暂停功能，只是我在这里更改的代码块：

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

玩得开心！

Javascript打字机效果PAUSE / STOP按钮

2 个答案: