JavaScript 动画占位符不起作用

Question

我正在尝试编写每 2 秒更改一次占位符的代码。此外，它被认为是一个字母一个字母地键入，也被认为是一个字母一个字母地删除。

不幸的是，它不起作用。

我是 JS 的新手，来自 Python，所以我可能遗漏了一些非常简单的东西。

// Espera o HTML da página carregar

$(document).ready(function(){

    // Frases que aparecerão
    var phrases = ['Investir em ações', 'Tesouro-Direto', 'Valuation', 'Dados LREN3'];
    // Index da frase que será exibida
    var index = 0;
    // Tamanho da array
    var length = phrases.length;

    // Função que vai exibir as frases a cada intervalo de tempo
    setInterval(function(){

        // Verifica se o índice não é maior que o tamanho da array
        if (index < length){

            // Frase que será escrita
            var newPlaceholder = phrases[index];

            // Tamanho da frase que será escrita
            var txtLen = newPlaceholder.length;

            // Caracter pelo qual a frase vai começar a ser escrita
            var char = 0;

            // Inicializa a variável que vai receber a função timeout
            var timeout;

            // Função que digita a frase letra por letra
            function typeIt(){

                // Tempo que vai demorar até a próxima letra ser escrita
                var humanize = Math.round(Math.random() * (200 - 30) + 30);

                // Executa a função depois de alguns segundos (humanize)
                timeout = setTimeout(function(){

                    // Deve estar sempre um caracter a frente por conta do slice
                    char++;

                    // Parte da string que será digitada
                    var substr = newPlaceholder.substring(0, char);

                    // Digita a parte da string
                    $('input').attr('placeholder', substr + "|");

                    // Executa a função type
                    typeIt();

                    // Caso já tenha chegado ao fim da string
                    if (char === txtLen) {
                        $('input').attr('placeholder', $('input').attr('placeholder').slice(0, -1));
                        clearTimeout(timeout);
                    }
                }, humanize);
            }
            index++;
        }
    }, 2000);
});

Answer 1

你永远不会开始你的一系列打字。您应该调用 typeIt(); 作为您的 setInterval() 回调的最后一行。