设置超时和循环

Question

您好，我在 Javascript.

中遇到问题

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

为此，我使用 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) 
                }
            })

    <button type="button">Clic</button>

但是这些值是同时显示的，不是一个一个显示的。

Answer 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) 
        }
    })

设置超时和循环

SetTimeout and Loops

javascript

for-loop

settimeout