等待函数完成后再再次调用它
我正在尝试使用 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回答
-
万千封印
您可以在调用 a 时awaitfor a 。这样，函数就变成了每次完成后都会被调用：PromisesetIntervalasyncasync 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); }}();<div class = "output-wrapper" id = "output"></div> -
MM们
setTimeout与数组的解决方案var delay = 90; // Writing speedvar 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 arrayvar 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 processvar n = 0;for (var i = 0; i < arr.length; i++) { setTimeout(() => { output(arr[n][0], arr[n][1]); n++; }, arr[i][2]);}<div class="output-wrapper" id="output"></div>
随时随地看视频慕课网APP
相关分类
JavaScript