提高自动键入JavaScript代码的键入速度

Question

我目前有一个Javascript代码，可以自动在屏幕上键入文本。但是，我不知道如何提高打字速度。目前，整个代码显示时间太长。我正在尝试使“打字机”效果更快地显示。

 function setupTypewriter(t) {
        var HTML = t.innerHTML;

        t.innerHTML = "";

        var cursorPosition = 0,
            tag = "",
            writingTag = false,
            tagOpen = false,
            typeSpeed = 100,
        tempTypeSpeed = 0;

        var type = function() {
        
            if (writingTag === true) {
                tag += HTML[cursorPosition];
            }

            if (HTML[cursorPosition] === "<") {
                tempTypeSpeed = 0;
                if (tagOpen) {
                    tagOpen = false;
                    writingTag = true;
                } else {
                    tag = "";
                    tagOpen = true;
                    writingTag = true;
                    tag += HTML[cursorPosition];
                }
            }
            if (!writingTag && tagOpen) {
                tag.innerHTML += HTML[cursorPosition];
            }
            if (!writingTag && !tagOpen) {
                if (HTML[cursorPosition] === " ") {
                    tempTypeSpeed = 30;
                }
                else {
                    tempTypeSpeed = (Math.random() * typeSpeed) + 100;
                }
                t.innerHTML += HTML[cursorPosition];
            }
            if (writingTag === true && HTML[cursorPosition] === ">") {
                tempTypeSpeed = (Math.random() * typeSpeed) + 100;
                writingTag = false;
                if (tagOpen) {
                    var newSpan = document.createElement("span");
                    t.appendChild(newSpan);
                    newSpan.innerHTML = tag;
                    tag = newSpan.firstChild;
                }
            }

            cursorPosition += 1;
            if (cursorPosition < HTML.length - 1) {
                setTimeout(type, tempTypeSpeed);
            }

        };

        return {
            type: type
        };
    }

    var typer = document.getElementById('typewriter');

    typewriter = setupTypewriter(typewriter);

    typewriter.type();

#top{
  height: calc(100vh);
  padding: 4em;
  color: rgba(255,255,255,.75);
}

.var-highlight {
    color: #4d9cd6;
  }
  
  .string-highlight {
    color: rgba(253, 149, 90, 0.8);
  }
  .object {
      color: #9cdcfe;
  }
  .equal {
      color: #ffffff;
  }
  .paranthesis {
      color: #f1d700;
  }
  .objectProp {
      color: #9cdcfe;
  }
  .array {
      color: #da70d6;
  }
  pre {
      color: #ffffff;
  }
  #typewriter {
    font-size: 2em;
    margin: 0;
    font-family: "Courier New";
    margin-top: 6%;
    margin-left: 4%;
  }
  #typewriter:after {
    content: "|";
    -webkit-animation: blink 500ms linear infinite alternate;
            animation: blink 500ms linear infinite alternate;
  }
  .fa-chevron-down {
    color: white;
    position: absolute;
    bottom: 0;
    margin-bottom: 1%;
  }
  
  @-webkit-keyframes blink {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes blink {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

<div class="container-fluid" id="top">
    <pre id="typewriter">
        <span class="var-highlight">var</span> <span class="object">object</span><span class="equal"> =</span> <span class="paranthesis">{</span>
           <span class="objectProp"> name:</span> <span class="string-highlight">'Alyssa Durante'</span>,
           <span class="objectProp"> occupation:</span>  <span class="string-highlight">'UI Engineer'</span>,
           <span class="objectProp"> location:</span> <span class="string-highlight">'NYC'</span>,
           <span class="objectProp"> specialties:</span> <span class="array">[</span><span class="string-highlight">'Modern interfaces'</span>,
                        <span class="string-highlight">'Clean code'</span>,
                        <span class="string-highlight">'Being awesome'</span><span class="array">]</span>;
        <span class="paranthesis">}</span>; </pre>
        </div>

任何帮助将不胜感激！

Answer 1

您的setupTypewriter()函数在顶部定义了一些初始配置变量。从功能上看，从typeSpeed增加100应该会增加打字速度。

Answer 2

我将更改typeSpeed属性，然后使用它代替2个地方的常量100值。 typeSpeed数字越小，键入速度越快。还要根据它计算空格字符的类型速度。我已经在下面修改了您的代码段。

function setupTypewriter(t) {
        var HTML = t.innerHTML;

        t.innerHTML = "";

        var cursorPosition = 0,
            tag = "",
            writingTag = false,
            tagOpen = false,
            typeSpeed = 50,
        tempTypeSpeed = 0;

        var type = function() {
        
            if (writingTag === true) {
                tag += HTML[cursorPosition];
            }

            if (HTML[cursorPosition] === "<") {
                tempTypeSpeed = 0;
                if (tagOpen) {
                    tagOpen = false;
                    writingTag = true;
                } else {
                    tag = "";
                    tagOpen = true;
                    writingTag = true;
                    tag += HTML[cursorPosition];
                }
            }
            if (!writingTag && tagOpen) {
                tag.innerHTML += HTML[cursorPosition];
            }
            if (!writingTag && !tagOpen) {
                if (HTML[cursorPosition] === " ") {
                    tempTypeSpeed = typeSpeed/3;
                }
                else {
                    tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
                }
                t.innerHTML += HTML[cursorPosition];
            }
            if (writingTag === true && HTML[cursorPosition] === ">") {
                tempTypeSpeed = (Math.random() * typeSpeed) + typeSpeed;
                writingTag = false;
                if (tagOpen) {
                    var newSpan = document.createElement("span");
                    t.appendChild(newSpan);
                    newSpan.innerHTML = tag;
                    tag = newSpan.firstChild;
                }
            }

            cursorPosition += 1;
            if (cursorPosition < HTML.length - 1) {
                setTimeout(type, tempTypeSpeed);
            }

        };

        return {
            type: type
        };
    }

    var typer = document.getElementById('typewriter');

    typewriter = setupTypewriter(typewriter);

    typewriter.type();

#top{
  height: calc(100vh);
  padding: 4em;
  color: rgba(255,255,255,.75);
}

.var-highlight {
    color: #4d9cd6;
  }
  
  .string-highlight {
    color: rgba(253, 149, 90, 0.8);
  }
  .object {
      color: #9cdcfe;
  }
  .equal {
      color: #ffffff;
  }
  .paranthesis {
      color: #f1d700;
  }
  .objectProp {
      color: #9cdcfe;
  }
  .array {
      color: #da70d6;
  }
  pre {
      color: #ffffff;
  }
  #typewriter {
    font-size: 2em;
    margin: 0;
    font-family: "Courier New";
    margin-top: 6%;
    margin-left: 4%;
  }
  #typewriter:after {
    content: "|";
    -webkit-animation: blink 500ms linear infinite alternate;
            animation: blink 500ms linear infinite alternate;
  }
  .fa-chevron-down {
    color: white;
    position: absolute;
    bottom: 0;
    margin-bottom: 1%;
  }
  
  @-webkit-keyframes blink {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes blink {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

<div class="container-fluid" id="top">
    <pre id="typewriter">
        <span class="var-highlight">var</span> <span class="object">object</span><span class="equal"> =</span> <span class="paranthesis">{</span>
           <span class="objectProp"> name:</span> <span class="string-highlight">'Alyssa Durante'</span>,
           <span class="objectProp"> occupation:</span>  <span class="string-highlight">'UI Engineer'</span>,
           <span class="objectProp"> location:</span> <span class="string-highlight">'NYC'</span>,
           <span class="objectProp"> specialties:</span> <span class="array">[</span><span class="string-highlight">'Modern interfaces'</span>,
                        <span class="string-highlight">'Clean code'</span>,
                        <span class="string-highlight">'Being awesome'</span><span class="array">]</span>;
        <span class="paranthesis">}</span>; </pre>
        </div>