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。

如何保持插件的实例（我怀疑setTimeout）不会相互干扰？

Answer 1

变化：

_changeFocus = function(newIndex){

为：

function _changeFocus (newIndex){

或：

var _changeFocus = function(newIndex){

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

FIDDLE

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

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

1 个答案: