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

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

You're really doing this in a bad way. Even if it worked (by moving the setting of "x" to the current opacity inside the loop) you're still burning CPU time in that loop. Javascript isn't made to work this way because it'll block all other activity for the .8s while the opacity goes down. Do this instead:

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

Answer 2

the problem with the endless loop is not going to be solved even if you put the x calculation inside the while loop.

JS is single threaded application meaning that the setTimeout or animate is never going to be executed because you are trapped in the endless loop before exiting the function. You will probably need this function to be calling itself.

To get rid of this endless loop you have to also setTimeout the call to check, dont use a while, use a function that you can call to check the value every certain amount of miliseconds. this way you will be allowing the first settimeout and animate to work.

Basically, you have to avoid blocking the thread. if a function is containing an endless loop, it doesn't matter if you have another function or a settimeout the whole js execution is trapped there. freezing the browser or any js runner.