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

使用元素存储间隔，而不是：

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

这样做：

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

然后在mouseleave处理程序中，使用clearInterval()清除它，如下所示：

$("#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();
});

这种执行超时/间隔的方式消除了全局变量，如果需要，您可以为每个元素设置超时/间隔（而不是每个元素的每个超时/间隔的全局变量）。

Answer 2

另一种方法是将变量从鼠标悬停中取出，以便可以与鼠标距离共享。

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

中运行代码，则它不是全局变量

我怎样才能停止鼠标的倒计时？

2 个答案: