做/同时循环创建与setTimeout相结合的无限循环

Question

我不知道为什么这行不通。 我使用的是内联不透明度，因此varX可以正常使用。 但这似乎是无休止的循环。 zIndex更改本身也可以正常工作。 因此，我在做某件事时一定做错了。

目标是仅在不透明度达到0时更改z-index。

HTML

<div class="ribbon_services_body" id="ribbon_services_body_id" style=" opacity:1;">

JAVASCRIPT

fade();
function fade() {

    setTimeout(function() {
        $("#ribbon_services_body_id").delay(0).animate({"opacity": "0"}, 800);

    },1000); 

    //var x = $('#ribbon_services_body_id').css('opacity');

    do {
        if($('#ribbon_services_body_id').css('opacity') == 0) {
            document.getElementById('ribbon_services_body_id').style.zIndex = "1";
        }
    }
    while ($('#ribbon_services_body_id').css('opacity') > 0.1);
}

CSS

.ribbon_services_body {
    z-index:3;
    display:block;
    position: absolute;
    width: 100%;
    height: 10vh;
}

Answer 1

您这样做的方式确实很糟糕。 即使它起作用（通过将“ x”的设置移动到循环内的当前不透明度），您仍然在该循环中消耗CPU时间。 Javascript不能这样工作，因为它会在不透明度下降时阻止.8s的所有其他活动。 改为这样做：

$("#ribbon_services_body_id").delay(1000).animate({
   opacity: 0
}, {
   complete: function() {
       document.getElementById('ribbon_services_body_id').style.zIndex = "1";
   },
   duration: 800
});

Answer 2

即使将x计算放在while循环中，也无法解决无限循环的问题。

JS是单线程应用程序，这意味着setTimeout或animate永远不会执行，因为在退出该函数之前您陷入了无限循环。 您可能需要此函数来调用自身。

要摆脱这种无休止的循环，您还必须setTimeout调用进行检查，不要使用一段时间，而要使用可以调用的函数，每隔一定的毫秒数检查一次值。 这样，您将允许第一个settimeout和动画生效。

基本上，您必须避免阻塞线程。 如果一个函数包含一个无限循环，那么是否有另一个函数或settimeout无关紧要，整个js执行都被困在那里。 冻结浏览器或任何js运行程序。