javascript - 我怎样才能停止 mouseleave 的倒计时？

Question

代码如下:

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

另一种方法是将变量从 mouseover 中取出，以便它可以与 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

现在 mouseleave 可以访问间隔

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

counter = 0;   

clearInterval( interval )

// etc etc etc

如果您在 $(document).ready() 中运行代码，则它不是全局变量