Javascript 我如何使这种淡入/淡出无限？

当start变量为true时，该代码淡入和淡出div#形状。 当我从事件“click”调用“start”方法时，浏览器停止工作，因为whileinside方法是不定式的，“click”事件直到“start”方法完成才结束。 我希望该方法在“click”事件完成后运行。 我该怎么办

CSS

HTML

---

您不需要该标志，只需创建一个递归函数即可。我把时间改为300毫秒，这样你就能看得更清楚了

div将淡入，淡入完成后，它将淡出，然后再次调用

startGame

功能，整个过程将无限重复

或者，只有当您只需要针对现代浏览器时，才可以使用css实现这一点。我将把这个链接放在这里，它来自一个不同的问题。我不会粘贴代码，因为您没有用css标记问题，但小提琴显示了所有内容。我不相信这件事

---

JavaScript在单线程环境中运行，这意味着一旦进入无限循环，就只能从循环中退出循环。在同步执行中，就像您在这里看到的一样，循环外的任何代码都不会影响循环条件

至于您的问题，人们建议了一些解决方案，例如制作递归函数或使用CSS3转换

另一种可能的方法是使用诸如和/或之类的定时功能

下面的代码将使fadeIn/Out在每秒后、单击开始按钮后和单击停止按钮前发生

var toggle=true；//动画方向标志
变量形状=$（“#形状”）；//因此，我们不会在每次设置动画时选择形状
var持续时间=1000；//动画持续时间
var延迟=1000；//动画之间的延迟
var timerId；//setInterval返回的计时器id
//延迟后开始设置形状的动画
$（“#开始按钮”）。单击（函数（）{
timerId=设置间隔（动画、延迟）；
});
//停止设置形状动画并将其隐藏
$（“#停止按钮”）。单击（函数（）{
清除间隔（timerId）；
css（'display'，'none'）；
});
//根据切换标志设置形状动画的函数
函数animate（）{
如果（切换）{
形状.法代因（持续时间）；
切换=假；
}否则{
形状衰减（持续时间）；
切换=真；
}
}

#形状{
背景色：红色；
宽度：100px；
高度：100px；
显示：无；
}

开始游戏！
停止游戏为什么有
while（start==true）
？什么是点击事件？你是说褪色吗？你应该看看jquery fadeIn/Out是如何工作的，它们都有一个完整的方法，因为我想让它无限地淡入淡出，所以应该递归地进行，然后你可以解释更多吗？我已经添加了一个例子来回答
#shape {
     background-color:red;
     width:100px;
     height:100px;
     display:none;
 }

 <div id="shape"></div>
    <button id="startButton">start game!</button>

var start = false;
$("#startButon").click(function () {
    start = true;
    startGame();
});

function startGame() {
    while (start == true) {
        $("#shape").fadeIn(1000).delay(1000).fadeOut(1000);
    }
}

$("#startButton").click(function () {
    startGame();
});

function startGame() {
    $("#shape").fadeIn(300, function () {
        $("#shape").fadeOut(300, function () {
            startGame();
        });
    });
}