函数完成后才再次运行函数。
函数完成后才再次运行函数。
提问于 2022-10-29 21:00:28
我正试图制作一个程序，将文本添加到网页中，如下所示：
Hello
Morning
Morning
Morning
Morning
Evening应该有：
- 5秒延迟在“你好”和第一个“早晨”之间，
- 5秒延迟在每个“早晨”之间，
- 6秒延迟在最后一个“早晨”和“晚上好”之间。
这是我到目前为止得到的整个HTML和JavaScript。
function notify(msg, loops, taskTime) {
var ul = document.getElementById("notifications");
for (let i = 0; i < loops; i++) {
(function(i) {
window.setTimeout(function() {
var li = document.createElement("li")
li.appendChild(document.createTextNode(`${msg}`));
ul.appendChild(li)
}, taskTime * i)
}(i))
}
}
notify('Hello', 1, 5000)
notify('Morning', 4, 5000)
notify('Evening', 1, 6000)<div>
<ul id="notifications" style="list-style-type:none;margin-left:10%;"></ul>
</div>
我的问题是，在加载网页时，输出是：
Hello
Morning
Evening
Morning
Morning
Morning如何确保函数按我希望的顺序运行，而不是按照混合输出的顺序运行？前3项输出也立即出现，而不是延迟。我该怎么避免呢？
Stack Overflow用户
发布于 2022-10-29 21:25:04
根据Mike的评论：
tasks = [
{message: 'Hello', delay: 5000},
{message: 'Morning', delay: 5000},
{message: 'Morning', delay: 5000},
{message: 'Morning', delay: 5000},
{message: 'Morning', delay: 5000},
{message: 'Evening', delay: 6000},
]
function runTask(index) {
var ul = document.getElementById("notifications");
var li = document.createElement("li");
li.appendChild(document.createTextNode(`${tasks[index].message}`));
ul.appendChild(li);
if(index < tasks.length - 1){
setTimeout( () => runTask(index + 1), tasks[index].delay);
}
}
if(tasks.length > 0) runTask(0); //make sure the task list has at least one element.页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74248796
复制相关文章
相似问题
腾讯云开发者
