如何在 JavaScript 中创建无限 while 循环？

Question

所以我想做一个简单的雪花随机从天上飘落的效果。我可以让它们同时以不同的速度落下，但我似乎不能只为 +1 雪花再次调用 while 循环。 这是整个内容的链接，让您了解它应该是什么样子

这是代码：

function createSnowflakes() {
    let i = 0;
    while (i < 30) {
        document.body.innerHTML += `<div  class="snowflake${Math.floor(Math.random()*10)} snowflakes"></div>`;
        i++
    }
    let snowflakes = document.querySelectorAll('.snowflakes');

    snowflakes.forEach((snowflake) => {
        snowflake.style.transform = `translateX(${window.innerWidth * Math.random()}px)`;
        snowflake.style.animation = `falling1 ${Math.floor(Math.random() * 8)+3}s linear forwards`;
    })

    snowflakes.forEach((elem) => console.log(elem));
    snowflakes.forEach((elem) => {
        elem.addEventListener('animationend', e => {
            elem.remove();
            snowflakes = document.querySelectorAll('.snowflakes');
            if (snowflakes.length < 10) {
                createSnowflakes();
            }
        })
        
    })
}

createSnowflakes();

Answer 1

JavaScript 中的天真的无限循环通常会导致浏览器锁定。 此外，它不会正确渲染 - 它看起来像是在跳帧（因为渲染仅在最后完成）。有一个 API 可以实现这一点：requestAnimationFrame。虽然它看起来不像无限循环，但这就是它在实践中所做的。

但是，看看你的代码，你似乎根本不需要无限循环，而是每隔几（毫秒）触发你的造雪机 - 这可以通过

setInterval()

:

来完成

function createSnowflakes() {
    ...
}

const handle = setInterval(createSnowflakes, 1000);

备注：

如果你想停止效果，需要

1. handle

   （只需调用

   clearInterval(handle)

   ）
2. 每 1000 毫秒（= 1 秒）触发一次
3. 如果你想要随机计时，你应该使用

   setTimeout()

   代替：

let keepMakingThem = true;
function createSnowflakes() {
    ...
    
    if (keepMakingEm) {
        setTimeout(Math.random() * 1000);
    }
}
createSnowFlakes();