Question

今天，我第一次遇到了一个问题，即变量与多个jQuery插件实例混在一起。

我的插件的简单版本可在此处查看：http://jsfiddle.net/jydzB/2/

我希望能够在插件中简单地创建一个计时器，并在插件中的另一个方法中访问变量“myTimer”。在这种情况下，要摧毁它。但是，我确信创建变量就像我在下面用“myTimer”所做的那样，只能在该类/插件中使用该变量？我错了吗？如何在插件中使用变量？我知道我可以将它们存储在$ obj.data（''，''）中，但是只要将它存储在var中就可以了。

您将看到，当您运行jsFiddle脚本时，它不会破坏计时器。

简单的HTML

Write a line every five seconds... destroy it after 10:<br />
<hr />
<div id='myDiv' style='border: solid 1px #000;float:left;'></div>
<div id='myDiv2' style='border: solid 1px #f00;float:right;'></div>

jQuery插件

if (jQuery) (
    function (jQuery) {        
        var myTimer;            
        var methods = {
            init: function () {
                return this.each(function () {
                    var $obj = $(this);
                    var data = $obj.data('init');
                    if (!data) {
                        myTimer = setInterval(function(){
                            writeLine($obj)
                        }, 1000);
                        $obj.data('init', true);
                        $obj.data('cnt',0);
                    }
                });        
            },
            destroy: function () {
                var $obj = $(this);
                $obj.data('init', false);
                clearInterval(myTimer);
                $obj.append("Destroyed!");
            }
        };        
        $.fn.timeIt = function (method) {                   
            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else if (typeof method === 'object' || !method) {
                return methods.init.apply(this, arguments);
            } else {
                $.error('Method ' + method + ' does not exist on jQuery.timeIt');
            }
        };
    }
)(jQuery);

$('#myDiv').timeIt();
$('#myDiv2').timeIt();

function writeLine(cObj) {
    cObj.data('cnt',cObj.data('cnt')+1);
    cObj.append("Another line written...(" + cObj.data('cnt') + ")<Br />");    
    if(cObj.data('cnt')>=10){
        cObj.timeIt('destroy');
    }        
}

Answer 1

我认为使用范围在该级别的变量很好，除了您在each内部分配myTimer的值（每次不同的上下文）。如果你删除第二个连线（$('#myDiv2').timeIt();），它就像一个冠军。使用实例存储变量可能更合适。

jQuery插件变量可用性

1 个答案: