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属性仅在函数作用域中定义，它们不能相互接触。在原型中定义外部的间隔属性，可以从两个函数中获取它。

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);
    }
};

希望这有帮助！

ClearInterval没有停止

2 个答案: