在setInterval()中调用jQuery插件的私有函数

时间:2012-02-21 22:17:46

标签: jquery jquery-plugins setinterval

我正在研究一个jQuery插件。基本上,我需要它做的是使用setInterval在我的插件中调用私有函数。看起来有很多不同的方法来创建一个jQuery插件。我正在使用以下方法,因为我发现它很清楚,但如果有一个工作解决方案需要我改变我构建插件的方式,我就打开了...

我简化了我的插件,只保留了有问题的部分:

(function($){
    $.fn.something = function(options)
    {
        var opts = $.extend({}, $.fn.something.defaults, options);
        return this.each(function()
        {
            var $this = $(this);
            $this.click(function(){
                startSomething($this);
            });
        });
        // Private function
        function startSomething($this)
        {
            // $this is defined
            setInterval(doSomething, 1000);
        };
        // Another private function
        function doSomething($this)
        {
            // $this is undefined
        };
    };
    $.fn.something.defaults = {
        my_option: 'value'
    };
})(jQuery);

问题是我想每秒调用doSomething()。但我需要保持对我的元素的引用(在$ this变量中)。如果我使用setInterval(doSomething),该函数被调用,但我没有$ this变量作为参数。如果我使用setInterval(“doSomething($ this)”)函数是未定义的,因为它试图在全局上下文中找到它。

那么在这里调用我的私有函数并且能够将参数传递给它的解决方案是什么?

由于

3 个答案:

答案 0 :(得分:4)

经过一些试验和错误后,解决方案比我想象的更简单。使用匿名函数有助于解决问题。这是原始问题的代码,但有一些变化:

(function($){
    $.fn.something = function(options)
    {
        var opts = $.extend({}, $.fn.something.defaults, options);
        return this.each(function()
        {
            var $this = $(this);
            $this.click(function(){
                startSomething($this);
            });
        });
        // Private function
        function startSomething($this)
        {
            // $this is defined
            setInterval(function(){
                doSomething($this);
            }, 1000);
        };
        // Another private function
        function doSomething($this)
        {
            // $this is undefined
            $this.toggle();
        };
    };
    $.fn.something.defaults = {
        my_option: 'value'
    };
})(jQuery);

$('#test').something();

(如果您想尝试一下,这里是jsFiddle:http://jsfiddle.net/p4j6z/

答案 1 :(得分:1)

不要这样做,这件事工作::)

    function startSomething($this)
    {
        // $this is defined
        setInterval(doSomething($this), 1000);
    };
    // Another private function
    function doSomething($this)
    {
        return function()
        {
            //do your thang!
        }
    };

这里的代码用于演示我在上一条评论中的含义:

 var opts = $.extend({}, $.fn.something.defaults, options);
 setInterval(doSomething,1000);
        return this.each(function()
        {
            var $this = $(this);
            $this.click(function(){
                $(this).data('started',true);
            });
        });
        // Another private function
        function doSomething()
        {
            $('sel[data-started="true"]').NowMaybeDoYourThing();
        };

最后一次尝试:(用Google搜索,并在stackoverflow上找到它;)

      var self =this;
        return this.each(function()
        {
            var $this = $(this);
            $this.click(function(){
                var it = $(this);
                setInterval(function(){ 
                   self.doSomethingWithIt(it);
                }
            });
        });
        // Another private function
        function doSomethingWithIt(it)
        {
        };

答案 2 :(得分:0)

从上面的答案中总结一下:

setInterval(function(){  someFunction();   }, interval);

* note interval是调用函数someFunction()时的整数值。