首頁猿問等待函數完成后再再次調用它

等待函數完成后再再次調用它

JavaScript

臨摹微笑 2023-08-24 10:19:48

我正在嘗試使用 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 個動畫同時發生。如何讓動畫一個接一個地發生？

查看完整描述

2 回答

萬千封印

TA貢獻1891條經驗獲得超3個贊

您可以在調用 a 時awaitfor a 。這樣，函數就變成了每次完成后都會被調用：PromisesetIntervalasync

async function typeText(text, outputElement) {

var i = 0;

var paragText = "";

await new Promise(resolve => setInterval(function () {

paragText += text.charAt(i);

outputElement.innerText = paragText;

i++;

if (text.length == i)

resolve();

}, 70))

}

async 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);

await typeText(text, outputElement);

}

const init = async function() {

const outStrs = [

{text:"Test output 1",color:"red"},

{text:"Test output 2",color:"green"},

{text:"Test output 3",color:"blue"},

];

for (i =0; i < outStrs.length; i++){

await output(outStrs[i].text, outStrs[i].color);

}

}();

反對回復 2023-08-24

MM們

TA貢獻1886條經驗獲得超2個贊

setTimeout與數組的解決方案

var delay = 90; // Writing speed

var arr = [ // Text and color Array

['Lorem ipsum dolor', 'red'],

['Consectetur adipisicing', 'green'],

['Earum voluptas', 'blue'],

];

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);

}, delay)

}

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);

}

// Calculates setTimeout: Push the start time of each line in the array

var time = 0;

for (var i = 1; i < arr.length; i++) {

time = time + delay + arr[i-1][0].length * delay;

arr[i].push(time);

}

// Execute the writing process

var n = 0;

for (var i = 0; i < arr.length; i++) {

setTimeout(() => {

output(arr[n][0], arr[n][1]);

n++;

}, arr[i][2]);

}

</div>

反對回復 2023-08-24

2 回答
0 關注
220 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

等待函數完成后再再次調用它

等待函數完成后再再次調用它

2 回答

添加回答