ClearInterval不停止

Question

我有以下JQuery代码：

JModel.ClipThumbs.Clip.prototype = {
    interval: null,

    setThumb: function(src) {
        this.mainThumb.src = src;
    },
    mouseEntered: function(el) {
        var temp        = this;
        var x           = 0;
        this.interval   = setInterval(function() {
            if (x >= temp.galleryImgs.length) {
                x = 0;
            }
            // set main thumb
            temp.setThumb(temp.galleryImgs[x].src);
            // increment for the display (0/7 being bad looking to users)
            x++; 
            // update image count display
            $(temp.clipCount).html(""+x+"/"+temp.galleryImgs.length); 
        }, 1000);
    },
    mouseLeft: function(el) {
        clearInterval(this.interval);
    }
};

当我离开画廊的时候，旋转并没有停止

想法？

编辑：修复是：

jQuery(this.mainThumb)
    .bind('mouseenter', jQuery.proxy(this.mouseEntered, this))
    .bind('mouseleave', jQuery.proxy(this.mouseLeft, this));

mouseleave必须有一个具有此绑定的jQuery.proxy才能访问它。

Answer 1

这应该是可行的：

clearInterval( this.interval );

在galleryImageMouseEnter方法中，您要在实例对象上定义interval属性。因此，在galleryImageMouseLeave方法中，您必须编写this.interval来引用该属性。

Answer 2

interval属性仅在函数作用域中定义，它们不能相互访问。在原型中定义一个interval属性，让您从这两个函数中到达它。

JModel.ClipThumbs.Clip.prototype = {

    // Define an interval object property
    interval: null,

    setMainThumb: function(src) {
        this.mainThumb.src = src;
    },
    galleryImageMouseEnter: function(el) {
        var temp        = this;
        var x           = 0;
        this.interval   = setInterval(function() {
            if (x >= temp.galleryImgs.length) {
                x = 0;
            }
            temp.setMainThumb(temp.galleryImgs[x].src);
            x++;
        }, 1000);
    },
    galleryImageMouseLeave: function(el){
        clearInterval(this.interval);
    }
};

希望这能有所帮助！