SetTimeout 和循环答案

【问题标题】：SetTimeout and Loops [duplicate]SetTimeout 和循环
【发布时间】：2020-11-24 12:11:47
【问题描述】：

您好，我的 Javascript 有问题。

我需要在单击 HTML 中的按钮时，值 0 到 10 出现在文档上，我希望每个值之前用破折号显示，但尤其是它们之间的 500 毫秒。

为此，我使用 for 循环 和 SetTimeout 函数。

我会让你阅读代码。

            let button = document.querySelector("button");
            let p = document.querySelector('p');

            button.addEventListener('click', () => {
                for (let i = 0; i<=10; i++) {
                        setTimeout(()=>{
                            document.write(`- ${i} <br>`);
                        },500) 
                }
            })

    &lt;button type="button"&gt;Clic&lt;/button&gt;

但是这些值会同时出现，而不是一个一个出现。

【问题讨论】：

...问题是什么？

标签： javascript for-loop settimeout

【解决方案1】：

由于 setTimeout 是一个异步函数，你必须增加每次迭代的延迟

    let button = document.querySelector("button");
    let p = document.querySelector('p');

    button.addEventListener('click', () => {
        for (let i = 0; i<=10; i++) {
                setTimeout(()=>{
                    document.write(`- ${i} <br>`);
                },500 * i) 
        }
    })

【讨论】：

谢谢它的工作