Question

你能帮帮我吗，当我将鼠标移到#headline_image时，如何停止此间隔？

$("#headline li").live('mouseover', function() { 
var HL = $(this).attr("data-name"); 
$("#headline_image").html("<img src='" + HL  + "'>"); });

setInterval(function()
{ $('#headline li[data-id=' + count + ']').mouseover(); },4000); });

我在mouseover函数中尝试过如下操作;但它没有用

clearInterval(function()  { $('#headline li').mouseover(); });

Answer 1

你需要使用setInterval返回的引用来清除它

var interval = setInterval(function () {
    $('#headline li[data-id=' + count + ']').mouseover();
}, 4000);

然后

clearInterval(interval)

还要确保在这两段代码共享的范围内声明变量区间

Answer 2

您必须从setInterval()电话中保存实际的时间段，然后将其传递给clearInterval()。

$("#headline li").live('mouseover', function() { 
    var HL = $(this).attr("data-name"); 
    $("#headline_image").html("<img src='" + HL  + "'>"); 
    clearInterval(timerId);
});

var timerId = setInterval(function() { 
    $('#headline li[data-id=' + count + ']').mouseover(); },4000); 
});

仅供参考，自{jQuery 1.7版以来已弃用.live()，甚至已从最新版本的jQuery中删除，因此您应该在正在使用的1.8版本中使用.on()。

如果#headline是静态对象（最初存在且未重新创建），那么您可以像这样切换到.on()：

$("#headline").on('mouseover', "li", function() { 
    var HL = $(this).attr("data-name"); 
    $("#headline_image").html("<img src='" + HL  + "'>"); 
    clearInterval(timerId);
});

var timerId = setInterval(function() { 
    $('#headline li[data-id=' + count + ']').mouseover(); },4000); 
});

如果#headline本身是动态的，请更改为：

$(static parent).on('mouseover', "#headline li", function() {

您可以使用选择器将static parent替换为最接近#headline的父级，而该.on()本身并非动态。

有关对动态元素使用{{1}}的参考，请参阅以下参考：

jQuery .on does not work but .live does

Does jQuery.on() work for elements that are added after the event handler is created?

Proper use of .on method in Jquery

我无法在Jquery中停止setInterval

2 个答案: