文本陣列的影片在幾個條目后停止

我有一個腳本，以某種打字機樣式顯示存盤在文本陣列中的多個單詞。但是，腳本在輸入幾個條目后停止，并且沒有按預期遍歷陣列中的所有單詞。也許我看不到明顯的問題，但是請給我一個提示嗎？

這是它的一支筆： https ://codepen.io/jackennils/pen/KKeVEbJ

document.addEventListener('DOMContentLoaded', function(event) {
    // array with texts to type in typewriter
    var dataText = ["Holz", "Schiefer", "Jeans", "Edelstahl", "Spiegel", "Acryl", "Leder", "Kork", "Fliesen", "Stein"];

    // type one text in the typwriter
    // keeps calling itself until the text is finished
    function typeWriter(text, i, fnCallback) {
        // check if text isn't finished yet
        if (i < (text.length)) {
            // add next character to span
            document.querySelector("span.mats").innerHTML = text.substring(0, i   1)   '<span  aria-hidden="true"></span>';

            // wait for a while and call this function again for next character
            setTimeout(function() {
                typeWriter(text, i   1, fnCallback)
            }, 100);
        }
        // text finished, call callback if there is a callback function
        else if (typeof fnCallback == 'function') {
            // call callback after timeout
            setTimeout(fnCallback, 1000);
        }
    }
    // start a typewriter animation for a text in the dataText array
    function StartTextAnimation(i) {
        if (typeof dataText[i] == 'undefined') {
            setTimeout(function() {
                StartTextAnimation(0);
            }, 0);
        }
        // check if dataText[i] exists
        if (i < dataText[i].length) {
            // text exists! start typewriter animation
            typeWriter(dataText[i], 0, function() {
                // after callback (and whole text has been animated), start next text
                StartTextAnimation(i   1);
            });
        }
    }
    // start the text animation
    StartTextAnimation(0);
});

body {
    background-color: #362871;
    height: 100%;
    font-family: 'Raleway', sans-serif;
}

p {
    font-size: 5em;
    color: white;
    text-transform: uppercase;
}

span.mats-inner {
    border-right: 20px solid;
    margin-left: 10px;
    animation: caret 1s steps(1) infinite;
}

@keyframes caret {
    50% {
        border-color: transparent;
    }
}

<p>Wir veredeln <span class="mats">mit Licht</span></p>

uj5u.com熱心網友回復：

if在陳述句的條件下，這確實是一個小的邏輯錯誤。

if (i < dataText[i].length)

在這里，您正在比較i單詞的字串長度，但它與字串長度無關。相反，將其與陣列長度進行比較，因為它是固定的。

顯示代碼片段

document.addEventListener('DOMContentLoaded', function(event) {
    // array with texts to type in typewriter
    var dataText = ["Holz", "Schiefer", "Jeans", "Edelstahl", "Acryl", "Leder", "Kork", "Fliesen", "Stein"];

    // type one text in the typwriter
    // keeps calling itself until the text is finished
    function typeWriter(text, i, fnCallback) {
        // check if text isn't finished yet
        if (i < (text.length)) {
            // add next character to span
            document.querySelector("span.mats").innerHTML = text.substring(0, i   1)   '<span  aria-hidden="true"></span>';

            // wait for a while and call this function again for next character
            setTimeout(function() {
                typeWriter(text, i   1, fnCallback)
            }, 100);
        }
        // text finished, call callback if there is a callback function
        else if (typeof fnCallback == 'function') {
            // call callback after timeout
            setTimeout(fnCallback, 1000);
        }
    }
    // start a typewriter animation for a text in the dataText array
    function StartTextAnimation(i) {
        console.log(i)
        if (typeof dataText[i] == 'undefined') {
            setTimeout(function() {
                StartTextAnimation(0);
            }, 0);
        }
        // check if dataText[i] exists
        if (i < dataText.length) {
            // text exists! start typewriter animation
            typeWriter(dataText[i], 0, function() {
                // after callback (and whole text has been animated), start next text
                StartTextAnimation(i   1);
            });
        }
    }
    // start the text animation
    StartTextAnimation(0);
});

body {
    background-color: #362871;
    height: 100%;
    font-family: 'Raleway', sans-serif;
}

p {
    font-size: 5em;
    color: white;
    text-transform: uppercase;
}

span.mats-inner {
    border-right: 20px solid;
    margin-left: 10px;
    animation: caret 1s steps(1) infinite;
}

@keyframes caret {
    50% {
        border-color: transparent;
    }
}

<p>Wir veredeln <span class="mats">mit Licht</span></p>

uj5u.com熱心網友回復：

你的if陳述邏輯有缺陷。該行if (i < dataText[i].length)正在檢查i（陣列的索引）是否小于字串的長度。在i變得足夠高之后，它高于陣列中大多數字串的長度。您的評論說您正在檢查是否dataText[i]存在。為此，您可以使用if (dataText[i]) {/* do whatever */}. 此行檢查是否存在位于 的i第 th 索引處的條目dataText。希望這有幫助。

標籤：javascript数组动画文本

上一篇：如何比較串列中的最小值？

下一篇：使用React對json/array使用.map()函式的問題