如何在一個函數刪除的setInterval？

Question

我有一個叫fadeIn功能，我想，直到條件滿足返回。

我試圖把報警與clearInterval(myVar)沿其他路線，但它只是不斷提醒。

CSS：

* { 
    background-color: black; 
    padding: 0; 
    margin: 0; 
    height: 100%; 
} 
#title { 
    background-color: white; 
    height: 50px; 
} 
audio { 
    display: none; 
} 
#audio-icon { 
    width: 50px; 
    background-color: white; 
} 
#focus { 
    background-color: black; 
    margin: auto; 
    width: 100%; 
    height: 700px; 
    border: 5px, solid, grey; 
    border-style: inset; 
    border-radius: 10px; 
} 
#text-box { 
    background-color: black; 
    width: 100%; 
    height: 200px; 
    margin-top: 500px; 
    float: left; 
    border: 5px, solid, grey; 
    border-style: inset; 
    border-radius: 10px; 
} 
#command-line { 
    background-color: black; 
    width: 100%; 
    height: 50px; 
    margin-top: 150px; 
    float: left; 
    border: 5px, solid, grey; 
    border-style: inset; 
    border-radius: 10px; 
} 
#element { 
    opacity: 0.1; 
} 

HTML：

<audio id="background-audio" controls autoplay="autoplay" loop> 
    <source src="Darkness.mp3" type="audio/mpeg"> 
</audio> 
<div id="title"> 
    <img id="audio-icon" src="unmute.png" onclick="mute()"> 
    <img id="element" src="123.png"> 
</div> 
<div id="focus"> 
    <div id="text-box"> 
     <div id="command-line"></div> 
    </div> 
</div> 

的JavaScript：

function fadeIn() { 
    var myVar = setInterval(fadeIn, 500); 
    var element = document.getElementById('element'); 


    if (element.style.opacity < 1) { 
     element.style.opacity -= '-0.1'; 
    } else { 
     clearInterval(myVar); 

    } 
} 

function mute() { 
    var audio = document.getElementById('background-audio'); 
    var img = document.getElementById('audio-icon'); 

    if (audio.muted) { 
     audio.muted = false; 
     img.src = 'unmute.png'; 
    } else { 
     audio.muted = true; 
     img.src = 'mute.png'; 
    } 
} 


document.onload = fadeIn(); 

UPDATE：

我已經把變量的函數外，所有的突然我的合作德似乎正常工作。不知道這是可能的，因爲我已經嘗試過了。我的代碼將無法運行，並alert將保持警戒。無論如何感謝所有的幫助。這是我的第一個問題從幾個錯別字因此除了和我把我的代碼的方式我真的不知道爲什麼我得到downvoted所以關於歡迎任何的反饋！這裏是我當前的工作代碼：

<script> 
      var myVar = setInterval(fadeIn, 500); 
      var element = document.getElementById('element'); 

      function fadeIn() { 
       console.log(element.style.opacity) 
       if (element.style.opacity < 1) { 
       element.style.opacity -= '-0.1'; 
       } else { 
       clearInterval(myVar); 
       } 
      } 

      function mute() { 
      var audio = document.getElementById('background-audio'); 
      var img = document.getElementById('audio-icon'); 

      if (audio.muted) { 
       audio.muted = false; 
       img.src = 'unmute.png'; 
      } else { 
       audio.muted = true; 
       img.src = 'mute.png'; 
      } 
     } 


     document.onload = fadeIn(); 
     </script> 

Answer 1

您撥打fadIn FUNC onload事件（這很好），但是你創建隊列執行功能每隔半秒，在每次迭代中創建另一個隊列執行函數的每半年秒....你遲早會殺了這個瀏覽器。

什麼你要找的可能是更多的像這樣：

function fadeIn() { 
    if (opacity < 1) { 
     opacity += 0.1; 
     setTimeout(fadeIn, 500); 
    } 
} 

document.onLoad = fadeIn(); 

如果不是學習JavaScript的目的，你應該使用CSS轉換，而不是JavaScript做這樣的事情淡入/淡出。

Answer 2

看到的片段。它將會1停止到達。看到的console.log

var myVar; 
 
var element = document.getElementById('element'); 
 

 
function fadeIn() { 
 

 
       console.log(element.style.opacity) 
 
       if (element.style.opacity < 1) {element.style.opacity -= -0.1; 
 
       } 
 
       else { 
 
        clearInterval(myVar); 
 

 
        } 
 
      } 
 

 
      function mute(){ 
 
       var audio = document.getElementById('background-audio'); 
 
       var img = document.getElementById('audio-icon'); 
 

 
       if (audio.muted) { 
 
        audio.muted = false; 
 
        img.src = 'unmute.png'; 
 
       } 
 

 
       else { 
 
        audio.muted = true; 
 
        img.src = 'mute.png'; 
 
       } 
 
      } 
 

 

 
     window.onload =function(){ 
 
      myVar = setInterval(fadeIn, 500); 
 
      }

* { 
 
       background-color: black; 
 
       padding: 0; 
 
       margin: 0; 
 
       height: 100%; 
 
      } 
 

 
      #title { 
 
       background-color: white; 
 
       height: 50px; 
 
      } 
 

 
      audio { 
 
       display: none; 
 
      } 
 

 
      #audio-icon { 
 
       width: 50px; 
 
       background-color: white; 
 
      } 
 

 
      #focus { 
 
       background-color: black; 
 
       margin: auto; 
 
       width: 100%; 
 
       height: 700px; 
 
       border: 5px, solid, grey; 
 
       border-style: inset; 
 
       border-radius: 10px; 
 
      } 
 

 
      #text-box { 
 
       background-color: black; 
 
       width: 100%; 
 
       height: 200px; 
 
       margin-top: 500px; 
 
       float: left; 
 
       border: 5px, solid, grey; 
 
       border-style: inset; 
 
       border-radius: 10px;  
 
      } 
 

 
      #command-line { 
 
       background-color: black; 
 
       width: 100%; 
 
       height: 50px; 
 
       margin-top: 150px; 
 
       float: left; 
 
       border: 5px, solid, grey; 
 
       border-style: inset; 
 
       border-radius: 10px; 
 
      } 
 

 
      #element { 
 
       opacity: 0.1; 
 
      }

<audio id="background-audio" controls autoplay="autoplay" loop> 
 
     <source src="Darkness.mp3" type="audio/mpeg"> 
 
     </audio> 
 

 

 
     <div id="title"> 
 
      <img id="audio-icon" src="unmute.png" onclick="mute()"> 
 
      <img id="element" src="123.png"> 
 
     </div> 
 

 
     <div id="focus"> 
 
      <div id="text-box"> 
 
       <div id="command-line"></div> 
 
      </div> 
 

 
     </div>

var myVar ; 
 
var element = document.getElementById('element'); 
 
function fadeIn() { 
 
       
 
       console.log(element.style.opacity) 
 
       if (element.style.opacity < 1) { 
 
        element.style.opacity -= -0.1; 
 
       } 
 
       else { 
 
        clearInterval(myVar); 
 

 
        } 
 
      } 
 
window.onload= function(){ 
 
    myVar = setInterval(fadeIn, 100); 
 
    
 
    
 
    }

<p id="element">hi</p>

Answer 3

這裏的問題是，setInterval是獨立於if子句調用，並且你是s在fadeIn函數的塊中，不可觀察的時間間隔，您無法訪問的時間間隔。

在這種情況下，您也可以使用setTimeout來代替它，因爲它只是一次異步評估其第一個參數，並且因爲您無法以處理它們的方式訪問間隔。

注意：您在減弱狀況是錯誤的，因爲你降低元素的不透明度，而其不透明度僅比1大...我只是0改變了這種1。

var element, lastFadeInTimeout; 
element = document.getElementById('element'); 

function fadeIn() { 
    // The element is not totally 
    // transparent yet 
    if (element.style.opacity > 0) { 
     element.style.opacity -= 0.1; 
     // Let's wait 500ms to fade the element 
     // again, only once 
     lastFadeInTimeout = setTimeout(fadeIn, 500); 
    } 
} 

現在，如果你想阻止你的淡入動作可以調用clearTimeout與lastFadeInTimeout，其中lastFadeInTimeout是由淡入行動創建的最後一個暫停的標識。

clearTimeout(lastFadeInTimeout);