Do/While循環創建無限循環結合setTimeout

我不明白爲什麼這不會工作。我使用內聯不透明，所以varX很好。但它似乎在創造和無止境的循環。 zIndex更改也可以自行完成。所以我一定在做/做錯了。Do/While循環創建無限循環結合setTimeout

首要目標就是改變z-index的一次不透明度達到0.1

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; 
}

來源

2017-10-15 NewCodeMan

您的'x'值永遠不會更新，因爲它沒有在循環中設置/更新。 – Nick

所以你的意思是把它放在下面呢？ – NewCodeMan

這肯定是一個好開始！ – Nick

你真的這樣做的方式很糟糕。即使它工作了（通過將「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 
});

來源

2017-10-15 19:49:27

這是尖銳的。我喜歡節省CPU資源。滴opacity罰款，但不競爭：func – NewCodeMan

這是在JavaScript中執行此操作的正確方法。請注意，我修復了代碼，因爲「要更改的屬性」和「選項」是單獨的哈希值。 –

你的改變工作完美！簡單而優雅謝謝 – NewCodeMan

即使您將x計算放在while循環中，無限循環的問題也不會解決。

JS是單線程應用程序，這意味着setTimeout或animate永遠不會執行，因爲您在退出函數之前被困在無限循環中。你可能需要這個函數來調用它自己。

要擺脫這種無限循環，你還必須設置Timeoutout檢查，不要使用一段時間，使用一個函數，你可以調用每一定數量的毫秒檢查值。這樣你將允許第一個settimeout和動畫工作。

基本上，你必須避免阻塞線程。如果一個函數包含一個無限循環，那麼不管你是否有另一個函數或一個settimeout，整個js執行都會被困在那裏。凍結瀏覽器或任何js亞軍。

來源

2017-10-15 20:00:09

Do/While循環創建無限循環結合setTimeout

回答

相關問題