Question

Consider we have a simple cycling Javascript process as:

function test() {
    el=document.getElementById("test");
    var opacity = 1;
    var id = setInterval(function() {
    opacity = opacity - 0.1;
    el.style.opacity= opacity;
    \\ if(mouseout) {clearInterval(id);} How to do this?
    if(opacity == 0) {clearInterval(id);}
    }, 500);
}

document.getElementById("test").
addEventListener('mouseover', function(){
  test();
});

Upon moveover event, the process initiates and continues until reaching the if condition. How we can define another if condition to stop the process by another event.

In the current example, how we can stop the process (reducing the opacity) upon mouseout event.

Answer 1

Declare your id variable outside the function. Then you can call clearInterval(id) from your mouseout handler.

Note that you don’t really need the test() function, you can put its contents directly in your mouseover handler:

var id,
    el = document.getElementById("test");

el.addEventListener('mouseover', function(){
    var opacity = 1;
    id = setInterval(function() {
       opacity = opacity - 0.1;
       el.style.opacity= opacity;
       if(opacity == 0) {clearInterval(id);}
    }, 500);
});
el.addEventListener('mouseout', function() {
   clearInterval(id);
});