How do I remove setInterval on a function?

Question

I've a function called fadeIn and I want to return it until a condition is met.

I tried to put an alert in the else line along with clearInterval(myVar), but it just keeps alerting.

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:

I have put the variables outside of the function and all of the sudden my code seems to work correctly. Not sure how this is possible since I have tried this already. My code wouldn't run at all and alert would keep alerting. Anyway thanks for all the help. This was my first question so apart from a few typos and the way I listed my code I don't really know why I get downvoted so any feedback about that is welcome! Here is my current working code:

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

can you post html & css also? – prasanth Nov 13 '16 at 13:22 — prasanth, Nov 13 '16 at 13:22
Sorry about that. Just added html and css. – Bushido Nov 13 '16 at 13:26 — Bushido, Nov 13 '16 at 13:26
I put your code in a fiddle: https://jsfiddle.net/hew5b39t/ – Nov 13 '16 at 13:31 — , Nov 13 '16 at 13:31

score 0 · Answer 1 · answered Nov 13 '16 at 13:33

See the snippet .it will stop the reach with 1 .see the 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>

score 0 · Answer 2 · answered Nov 13 '16 at 14:28

The problem here is that setInterval is called independently of the if clauses, and that you're spamming unobserved intervals, intervals on which you don't have access anymore in the fadeIn function's block.

In this case you could have also used setTimeout instead, because it asynchronously evaluate its first argument just once, and because you don't have access to the intervals in the way you handle them.

Note: your condition for fade in is wrong, because you're decreasing the element opacity while its opacity is only bigger than 1... i just changed this 1 by 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);
    }
}

Now, if you want to stop your fade-in action you can call clearTimeout with lastFadeInTimeout, where lastFadeInTimeout is the identifier of the last timeout created by the fade-in action.

clearTimeout(lastFadeInTimeout);

score -1 · Answer 3 · answered Nov 13 '16 at 13:31

You call the fadIn func onload (that's fine) but then you create a queue to execute the function every half a second, in each iteration you create another queue to execute the functio every half a sec.... sooner or later you're going to kill the browser with this.

What you're looking for is probably more like so:

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

document.onLoad = fadeIn();

If not for purpose of learning JavaScript you should probably do things like fadeIn / fadeOut using CSS transitions rather than JavaScript.

How do I remove setInterval on a function?

3 Answers3