Jquery 清除鼠标上的间隔

我正试图获得一个简单的图像循环（无过渡），使图像在鼠标上开始循环，在鼠标上停止循环。这是有效的，除了在mouseout上停止。我很难弄清楚如何清除间隔：

var itemInterval = 750; 
var numberOfItems = $('.portrait img').length;          
//set current item
var currentItem = 0;             
//show first item
$('.pimg').eq(currentItem).show();           

$('.portrait').hover(function() {                       
    //loop through the items
    var infiniteLoop = setInterval(function(){
        $('.pimg').eq(currentItem).hide();
        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.pimg').eq(currentItem).show();
    }, itemInterval);
},
function() {
    clearInterval(infiniteLoop);
});

我怎样才能让倒数第二行开始工作

---

编辑：修复了两个非代码输入错误

在函数外部定义

var infinitelop

，在函数内部将超时设置为

infinitelop=setInterval…

（无

var

）。完整代码：

var infiniteLoop;
$('.portrait').hover(function() {                       
    //loop through the items
    infiniteLoop = setInterval(function(){
        $('.pimg').eq(currentItem).hide();
        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.pimg').eq(currentItem).show();
    }, itemInterval);
},
function() {
    clearInterval(infiniteLoop);
});

---

在函数外部定义

var infiniteLoop

，在函数内部将超时设置为

infiniteLoop=setInterval…

（无

var

）。完整代码：

var infiniteLoop;
$('.portrait').hover(function() {                       
    //loop through the items
    infiniteLoop = setInterval(function(){
        $('.pimg').eq(currentItem).hide();
        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.pimg').eq(currentItem).show();
    }, itemInterval);
},
function() {
    clearInterval(infiniteLoop);
});

---

您在一个函数中声明了InfiniteLop，而在您调用它的另一个匿名函数中，它是不可用的。只需在两个函数之外声明该变量。

您在一个函数内声明了InfiniteLop，而在调用它的另一个匿名函数内则不可用。只需在两个函数之外声明该变量。

我认为您存在范围问题。试一试

var itemInterval = 750; 
var numberOfItems = $('.portrait img').length; 
var infiniteLoop = null;      
//set current item
var currentItem = 0;             
//show first item
$('.pimg').eq(currentItem).show();           

$('.portrait').hover(function() {                       
    //loop through the items
    infiniteLoop = setInterval(function(){
        $('.pimg').eq(currentItem).hide();
        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.pimg').eq(currentItem).show();
    }, itemInterval);
},
function() {
    clearInterval(infiniteLoop);
});

---

我认为你有一个范围问题。试一试

var itemInterval = 750; 
var numberOfItems = $('.portrait img').length; 
var infiniteLoop = null;      
//set current item
var currentItem = 0;             
//show first item
$('.pimg').eq(currentItem).show();           

$('.portrait').hover(function() {                       
    //loop through the items
    infiniteLoop = setInterval(function(){
        $('.pimg').eq(currentItem).hide();
        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.pimg').eq(currentItem).show();
    }, itemInterval);
},
function() {
    clearInterval(infiniteLoop);
});

---

无论如何，最佳实践建议不要依赖setInterval，这是不一致的，可能会导致代码运行不同步。相反，当以setTimeout（）结束时，应该使用调用自身的函数。这样可以更好地控制功能计时。谢谢Jose。我并没有意识到这一点，但这很有道理。无论如何，最佳实践建议不要依赖setInterval，因为setInterval不一致，可能会导致代码运行不同步。相反，当以setTimeout（）结束时，应该使用调用自身的函数。这样可以更好地控制功能计时。谢谢Jose。我不知道，但这很有道理。这很好，非常感谢。是否可以将$（'.pimg'）改为使用类似$（此“img”）的内容，以便每页可以有多个图像周期？我用$（this）.find（）和$（this）.children（）代替$（'.pimg'）的测试失败了。这很好，非常感谢。是否可以将$（'.pimg'）改为使用类似$（此“img”）的内容，以便每页可以有多个图像周期？我使用$（this.find（）和$（this.children（）代替$（'.pimg'）的测试失败。