为什么setInterval在我的jQuery插件中似乎存在范围问题？

问题描述

| 抱歉，这还不是很具体，但是我很难找出问题所在。 我已经编写了一个非常简单的jQuery插件，该插件可以按固定的时间间隔通过div（例如轮播）滚动图像或其他元素。我希望这个插件可以在一个页面上使用多个实例，但是当我在多个元素上调用它时，只会滚动最后一个初始化的元素。我以为我使用setInterval的方式是原因，但我不明白为什么。 滚动功能如下，完整资源链接在上面。

function scrollRight() {
    // Don\'t animate if the mouse is over the scrollah
    if (hovering) { return; }

    /* If we\'re at the end,flip back to the first image
     * before animating,lest we view blankness in the wrapper
     */
    if (position === nChildren) {
        position = 0;
        $wrapper.css(\'left\',\'0px\');
    }

    // Animate to the next view
    position++;
    $wrapper.animate({
        left: position*-width+\'px\'
    },1000,\'swing\',function() {
        // Animation complete.
    });
}
setInterval(scrollRight,5000);

那么，为什么该插件的各个实例在初始化后就不再滚动？     

解决方法

我认为，如果将

$wrapper = $this.find(\'.wrapper\');

更改为

var $wrapper = $this.find(\'.wrapper\');

可能会起作用。 前几天从Stack Overflow中学到了这一点：不使用

var

关键字的变量在范围上是隐式全局的，因此我认为每个滚动条都覆盖相同的全局

$wrapper

变量。 编辑：可能还想做

var $this = $(this);

。