関数でsetIntervalを削除するにはどうすればよいですか？

Question

私はfadeInという機能を持っており、条件が満たされるまでそれを戻したいと思っています。

clearInterval(myVar)と一緒にelse行にアラートを入れようとしましたが、アラートを維持しています。

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：

私は機能とのすべての外の変数を入れています突然の私の共同deは正しく動作するようです。私はこれを既に試してきたので、これがどのように可能であるか分かりません。私のコードはまったく動かず、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（それは大丈夫です）が、その後、あなたは、すべての半分の第2の機能を実行するためのキューを作成し、各反復であなたがfunctioを実行するために別のキューを作成しますちょっと待ってください。遅かれ早かれ、これでブラウザを殺すつもりです。

は何あなたが探していることは、よりそのように考えられます：

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

document.onLoad = fadeIn(); 

JavaScriptを学習する目的のためにあなたがむしろJavaScriptのよりCSSトランジションを使用してフェードイン/フェードアウトのようなものを行う、おそらくすべきではない場合。

Answer 2

は、ここでの問題はsetIntervalがあるということです.ITはに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

.see 1と範囲を停止しますスニペットを参照してください。 if節とは独立して呼び出され、あなたはあなたがfadeInファンクションのブロックにアクセスできない時間間隔を覗き見せてください。

この場合、最初の引数を非同期的に1回評価するだけでなく、処理する方法で間隔にアクセスできないため、setTimeoutを代わりに使用することもできます。

注：不透明度が1より大きい間に要素の不透明度を下げているため、フェードインの条件が間違っています... 1を0に変更しました。今

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

あなたがフェードイン動作を停止したい場合、あなたはlastFadeInTimeoutがフェードインアクションによって作成された最後のタイムアウトの識別子であるlastFadeInTimeout、とclearTimeoutを呼び出すことができます。

clearTimeout(lastFadeInTimeout);