How can i stop this countdown on mouseleave?

Question

Here is the code:

//Mouseover start countdown

$("#icon_no_1").mouseover(function()
{

$(this).fadeTo("slow", 0.23);

//Countdown

var counter = 0;
var interval = setInterval(function() {
    counter++;
    // Display 'counter' wherever you want to display it.

    if (counter == 1) {

    //Display 1
    $('#login_icon_1').fadeIn();
    //Fade in

    }

    if (counter == 2) {

    //Display 2

    $('#login_icon_1').fadeOut(750);

    //Fade in login icon 2

    $('#login_icon_2').fadeIn();

    }

    if (counter == 3) {

    //Display 3

    //Display 2

    $('#login_icon_2').fadeOut(500);

    //Fade in login icon 2

    $('#login_icon_3').fadeIn();

    }

    if (counter == 4) {

    //Display 4

    //Display 2

    $('#login_icon_3').fadeOut(500);

    //Fade in login icon 2

    $('#login_icon_4').fadeIn();

    }

    if (counter == 5) {

    //Display 2

    $('#login_icon_4').fadeOut(500);

    //Fade in login icon 2

    $('#login_icon_5').fadeIn();

    //Display 2

    $('#login_icon_5').fadeOut(1000);

    }

    if (counter == 6) {

    counter = 7;

    window.location.replace("/wahalu/index.php/login_advisor.php");
    }
}, 1000);

}

);

$("#icon_no_1").mouseleave(function()
{

counter = 0;

$(this).fadeTo("slow", 1);

$('#login_icon_1').hide();
$('#login_icon_2').hide();
$('#login_icon_3').hide();
$('#login_icon_4').hide();
$('#login_icon_5').hide();

}

);

});

Answer 1

Store the interval with the element, instead of this:

var interval = setInterval(function() {
  //code
}, 1000);

Do this:

$.data(this, 'interval', setInterval(function() {
  //code
}, 1000));

Then in your mouseleave handler, clear it using clearInterval(), like this:

$("#icon_no_1").mouseleave(function() {
  clearInterval($.data(this, 'interval'));
  counter = 0;
  $(this).fadeTo("slow", 1);
  $('#login_icon_1, #login_icon_2, #login_icon_3, #login_icon_4, #login_icon_5').hide();
});

This style of doing timeouts/intervals eliminates the global variables and if needed you can have a timeout/interval per element (instead of a global variable per timeout/interval, per element).

Answer 2

Another way to do it would be to take the variable out of the mouseover so that it can be shared with the mouseleave.

var interval; // <-- is in scope of both events now

$("#icon_no_1").mouseover(function() 
{ 

$(this).fadeTo("slow", 0.23); 

//Countdown 

var counter = 0; 
interval = setInterval(function() { 
    counter++; 
    // Display 'counter' wherever you want 

    // etc etc etc

Now the interval is accessible to mouseleave

$("#icon_no_1").mouseleave(function()   
{   

counter = 0;   

clearInterval( interval )

// etc etc etc

It is not a global variable if you are running your code inside of $(document).ready()