Question

最近，我正在编写一个移动html元素的jQuery插件我的插件是这样的：

$('#div1').moveIt({ top: 100, left: 200 });

问题是，当我为元素多次调用moveIt时。它将所有方法结合在一起。像这样的东西：

$('#div1').moveIt({ top: 100, left: 200 }); // first call
$('#div1').moveIt({ top: 200, left: 300 }); // second call
// even more calls ....

问题是：

如何阻止插件内的第二次调用？
如何在第一次通话中覆盖第二次通话的新值？

一个简单的示例代码就足够了。

编辑：here is my problem

Answer 1

更新：您的问题怎么办 - 查看小提琴http://jsfiddle.net/vittore/jHzLN/1/

您必须保存超时并在设置新超时时将其清除。

你所要求的是油门。查看此文章http://benalman.com/projects/jquery-throttle-debounce-plugin/

但是因为你真的使用jquery动画（你的插件名称告诉你），你必须使用别的东西。

检查stop()方法

 $(selector).stop(true, true).animate(...)

您可以做的另一个有趣的事情是排队其他动画。使用queue:true选项：

$(selector).animate({ left:...} , { queue: true })

Answer 2

这就是你想要的吗？ http://jsfiddle.net/acbabis/B89Bx/。让我知道：

$(function()
{
    var methods = 
    {
        init : function(options)  {
            $(this).each(function() {
                var self = $(this);
                var settings = $.extend({
                    top      : 50,
                    left     : 50,
                    dir      : true,
                }, options);
                var i=0, j=0;
                var move = function()
                {
                    settings = self.data('moveItTarget');
                    if(settings.dir)
                    {
                        i++;
                        j++;
                    }
                    else
                    {
                        i+=10;
                        j+=10; 
                    }

                    self.css({'top':Math.min(i, settings.top),
                            'left':Math.min(j, settings.left)});

                    if(j<=settings.top && i<=settings.top)
                    {
                        setTimeout(move,1);  
                    } else {
                        self.data('movingIt', false);
                    }
                };
                self.data('moveItTarget', settings);
                if(!self.data('movingIt')) {
                    self.data('movingIt', true);
                    move();                    
                }
            });
        }
    };

    $.fn.moveIt = function(methodOrOptions) {
        if (methods[methodOrOptions]) {
            return methods[methodOrOptions].apply(this,
                    Array.prototype.slice.call(arguments, 1));
        } else if (typeof methodOrOptions==='object' || !methodOrOptions) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method "'+methodOrOptions+'" does not exist!');
        }    
    };
}(jQuery));
$('#div1').moveIt({ top: 100, left: 100,  dir: true }); // first call
$('#div1').moveIt({ top: 300, left: 300,  dir: false }); // second call

jQuery插件：阻止对象的多次调用

2 个答案: