如何一个一个使用多个setTimeout？

Question

我想要动画文本解密。例如，我有加密文本 **** long ********* ****，我想慢慢将其替换为 some long encrypted text。

我尝试使用下面的代码，但当我需要在替换每个符号后暂停时，它会立即替换文本。

function play(encText, decrText) {

    function showText() {
        var text = decrText.substring(0, i+1) + encText.substring(i+1);
        console.log(text);
        document.getElementById('text').innerHTML = text;
    }

    for( var i=0; i < encText.length+1; i++ ) {
        setTimeout( showText(), i*5000 );
    }

}

见https://jsfiddle.net/bwf0Layg/。

我该如何解决？

Answer 1

您可以通过返回一个函数为 i 循环上的 showText 创建一个闭包。

此外，我已将您的 innerHTML 更改为 innerText，以阻止一些奇怪的事情发生，并将时间从 5 秒减少到演示目的。

例如

function play(encText, decrText) {
    function showText(i) {
       return () => {
         var text = decrText.substring(0, i + 1) + 
            encText.substring(i + 1);
         document.getElementById('text').innerText = text;
       }
    }

    for (var i = 0; i < encText.length + 1; i++) {
       setTimeout(showText(i), i * 100);
    }
}

play(document.getElementById('text').innerText, 'some long encrypted text')

<div id="text">
**** long ********* ****
</div>

Answer 2

你的代码的问题是最后一个运行一次写了所有的字母。您可以做的是创建一个带有 promise 和 setTimeout

的 sleep 函数

const sleep = ()=> new Promise((resolve)=> setTimeout(resolve,5000));

async function play(encText, decrText) {
      function showText(i) {
        var text = decrText.substring(0, i + 1) + encText.substring(i + 1);
        console.log(text);
        document.getElementById('text').innerHTML = text;
      }

      for (let i = 0; i < encText.length + 1; i++) {
        await sleep();
        showText(i)
      }

    }

所以在每次迭代中，您的代码都会“休眠”或等待 5 秒，然后再进行下一次迭代，使这个缓慢的字母出现。

如何一个一个使用多个setTimeout？

How to use several setTimeout one by one?

javascript

settimeout