javascript - SetTimeout 和循环

Question

您好，我在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) 
                }
            })

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

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

标签： javascriptfor-loopsettimeout

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