猿问

等待函数完成后再再次调用它

我正在尝试使用 JS 创建键入文本的外观。目前，该output函数创建一个新的 DOM 元素并typeText创建打字动画。

这是代码：


function typeText(text, outputElement) {

    var i = 0;

    var paragText = "";

    var interval = setInterval(function () {

        paragText += text.charAt(i);

        outputElement.innerText = paragText;

        i++;

        if (text.length == i)

            clearInterval(interval);

    }, 70)

}

function output(text, colour){

    var outputElement = document.createElement("p");

    outputElement.setAttribute("class", "output");

    outputElement.setAttribute("style", "color: " + colour + ";");

    var outputWrapper = document.getElementById("output");

    outputWrapper.appendChild(outputElement);

    typeText(text, outputElement);

}

output("Test output 1", "red");

output("Test output 2", "green");

output("Test output 3", "blue");

    <!DOCTYPE html>

    <html>

        <head></head>

        <body>

            <div class = "output-wrapper" id = "output">

            </div>

        </body>

    </html>

加载页面时，所有 3 个动画同时发生。如何让动画一个接一个地发生？



临摹微笑
浏览 166回答 2
2回答

万千封印

您可以在调用 a 时awaitfor a 。这样，函数就变成了每次完成后都会被调用：PromisesetIntervalasyncasync function typeText(text, outputElement) {&nbsp; var i = 0;&nbsp; var paragText = "";&nbsp; await new Promise(resolve => setInterval(function () {&nbsp; &nbsp; paragText += text.charAt(i);&nbsp; &nbsp; outputElement.innerText = paragText;&nbsp; &nbsp; i++;&nbsp; &nbsp; if (text.length == i)&nbsp; &nbsp; &nbsp; resolve();&nbsp; }, 70))}async function output(text, colour){&nbsp; var outputElement = document.createElement("p");&nbsp; outputElement.setAttribute("class", "output");&nbsp; outputElement.setAttribute("style", "color: " + colour + ";");&nbsp; var outputWrapper = document.getElementById("output");&nbsp; outputWrapper.appendChild(outputElement);&nbsp; await typeText(text, outputElement);}const init = async function() {&nbsp; const outStrs = [&nbsp; &nbsp; {text:"Test output 1",color:"red"},&nbsp; &nbsp; {text:"Test output 2",color:"green"},&nbsp; &nbsp; {text:"Test output 3",color:"blue"},&nbsp; ];&nbsp; for (i =0; i < outStrs.length; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; await output(outStrs[i].text, outStrs[i].color);&nbsp; &nbsp; &nbsp;&nbsp; }}();<div class = "output-wrapper" id = "output"></div>
0

MM们

setTimeout与数组的解决方案var delay = 90; // Writing speedvar arr = [&nbsp; &nbsp; &nbsp;// Text and color Array&nbsp; &nbsp; ['Lorem ipsum dolor', 'red'],&nbsp; &nbsp; ['Consectetur adipisicing', 'green'],&nbsp; &nbsp; ['Earum voluptas', 'blue'],];function typeText(text, outputElement) {&nbsp; &nbsp; var i = 0;&nbsp; &nbsp; var paragText = "";&nbsp; &nbsp; var interval = setInterval(function () {&nbsp; &nbsp; &nbsp; &nbsp; paragText += text.charAt(i);&nbsp; &nbsp; &nbsp; &nbsp; outputElement.innerText = paragText;&nbsp; &nbsp; &nbsp; &nbsp; i++;&nbsp; &nbsp; &nbsp; &nbsp; if (text.length == i)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(interval);&nbsp; &nbsp; }, delay)}function output(text, colour) {&nbsp; &nbsp; var outputElement = document.createElement("p");&nbsp; &nbsp; outputElement.setAttribute("class", "output");&nbsp; &nbsp; outputElement.setAttribute("style", "color: " + colour + ";");&nbsp; &nbsp; var outputWrapper = document.getElementById("output");&nbsp; &nbsp; outputWrapper.appendChild(outputElement);&nbsp; &nbsp; typeText(text, outputElement);}// Calculates setTimeout: Push the start time of each line in the arrayvar time = 0;for (var i = 1; i < arr.length; i++) {&nbsp; &nbsp; time = time + delay + arr[i-1][0].length * delay;&nbsp; &nbsp; arr[i].push(time);}// Execute the writing processvar n = 0;for (var i = 0; i < arr.length; i++) {&nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; output(arr[n][0], arr[n][1]);&nbsp; &nbsp; &nbsp; &nbsp; n++;&nbsp; &nbsp; }, arr[i][2]);}<div class="output-wrapper" id="output"></div>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答