Question

I can't figure out why this wont work. I'm using inline opacity, so varX grabs fine. But it seems to be creating and endless loop. zIndex change works fine also on its own. So I must be doing something wrong in do/while.

Goal is to just change z-index once opacity has reached 0.

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调用check，不要使用一段时间，使用一个你可以调用的函数来检查每隔一定数量的毫秒数值。通过这种方式，您将允许第一个settimeout和animate工作。

基本上，你必须避免阻塞线程。如果一个函数包含一个无限循环，那么如果你有另一个函数或一个settimeout整个js执行被困在那里并不重要。冻结浏览器或任何js跑步者。

Do/While loop creating endless loop combined with setTimeout

2 个答案: