將文本動畫化為循環書寫

Question

檢查下面的代碼。 在這里，我正在嘗試為文本設置動畫，該文本將在沒有單擊按鈕的情況下一遍又一遍地迭代。 代碼的第一部分適用於單擊按鈕，但第二部分不適用於我刪除 function 並將其添加到 jquery ready() 方法中。 它應該准備好文檔，但它不起作用。 我在這里做錯了什么？

這是現在點擊按鈕的工作：

<h1>Typewriter</h1>

<button onclick="typeWriter()">Click me</button>

<p id="demo"></p>

<script>
var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
</script>

這是我已經嘗試過的：

    <span id="demo"></span>

$(document).ready(function () {
        typeWriter();
        //writing effect
        var i = 0;
        var txt = 'Lorem ipsum dummy text blabla.';
        var speed = 50;
        function typeWriter() {
            if (i < txt.length) {
                document.getElementById("demo").innerHTML += txt.charAt(i);
                i++;
                setTimeout(typeWriter, speed);
            }
        }

        });

Answer 1

如果我在定義后調用 typeWriter() function 那么它對我有用。

$(document).ready(function () {
    var i = 0;
            var txt = 'Lorem ipsum dummy text blabla.';
            var speed = 100;
            function typeWriter() {
                if (i < txt.length) {
                    document.getElementById("secondLineTxt").innerHTML += txt.charAt(i);
                    i++;
                    setTimeout(typeWriter, speed);
                }
            }
            typeWriter();

});

Answer 2

 $(document).ready(function () { //writing effect var i = 0; var txt = 'Lorem ipsum dummy text blabla.'; var speed = 50; function typeWriter() { if (i < txt.length) { document.getElementById("demo").innerHTML += txt.charAt(i); i++; setTimeout(typeWriter, speed); } } typeWriter(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Typewriter</h1> <button>Click me</button> <p id="demo"></p>