javascript - jQuery插件的多个实例中的setTimeout冲突

Question

'focus'我有以下小插件，它可以在一组元素之间转换类。setTimeout这个问题是，如果我在一个页面上有多个集合，并且每个集合都应用了一个新的插件实例，那么不在插件实例上下文中的函数之间似乎存在冲突。

(function($){

   $.fn.focusChanger = function(){

      return this.each(function(){

        //VARIABLES     
        var $this = $(this),
            $targets = $this.find('.focus-target'),
            numTargets = $targets.length,
            autoSpeed = 2500,
            autoChangeT = setTimeout(_autoChange, 500),
            currentIndex = numTargets;

        /////////////// Handlers ///////////////
        $this.hover(
            function () {
                //stop auto-changing
                _autoReset();
            },
            function () {
                autoChangeT = setTimeout(_autoChange, 500);
            }
        );


        /////////////// Functions ///////////////

        //Change Slide
        _changeFocus = function(newIndex){
            $targets.eq(currentIndex).removeClass("focus");
            $targets.eq(newIndex).addClass("focus");
            currentIndex = newIndex;
        };

        //auto slide changer
        function _autoChange() {
            console.log($this);
            var newIndex;
            if(currentIndex >= numTargets - 1){
               newIndex = 0;
            }else{
               newIndex = currentIndex + 1;
            };
            _changeFocus(newIndex);
            autoChangeT = setTimeout(_autoChange, autoSpeed);
        };
        // stop auto slide changer
        function _autoReset() {
            clearTimeout(autoChangeT);
            $targets.eq(currentIndex).removeClass("focus");
        };

      });//end each (plugin)

   };// end fn

})(jQuery);

$(document).ready(function(){
    if($.fn.focusChanger){
        $('.focus-change-set').focusChanger();
    }
});

http://jsfiddle.net/Swpw2/8/

当应用于单个实例时，上面的小提琴显示了插件的工作版本。取消注释里面的第二个 HTML 块以查看它是否中断。

我已尽力理解以下问题，但无法将其应用于我的插件设置，因为我没有传递this到 setTimout。

• https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout#The_%27this%27_problem
• 将正确的“this”上下文传递给 setTimeout 回调？
• jQuery 插件、上下文和 setTimeout

如何防止插件的实例（我setTimeout特别怀疑）相互干扰？

Answer 1

改变：

_changeFocus = function(newIndex){

至：

function _changeFocus (newIndex){

或者：

var _changeFocus = function(newIndex){

如果没有varorfunction关键字，您将声明一个全局变量，因此两个实例都调用同一个闭包。

小提琴

我通过向所有 DIV 添加 ID、在 Javascript 调试器中设置断点来解决这个问题。当我在时_autoChange，$this并$targets指向第一个 DIV。当我踏入 时_changeFocus，它们突然变为指向第二个 DIV。那时我注意到您使用不同的语法来定义这些函数。