0

在我的 jquery-plugin 中，完成动画后，我被称为“破坏”功能两次..有人纠正我的错误吗？

功能：

;(function ( $, window, document, undefined ) {

    $.fn.BackendProcess = function(){

        var that = this;

        destroy = function(){
            console.log(arguments.callee.caller.toString());//consoling 2 times
        }

            that.bind( "myEventStart", function( e ) {
                $(this).css({width:"500"});
            });

            that.bind( "myEventEnd", function( e ) {
                setTimeout(function(){
                    $(that).animate({width :"100"},{
                        easing: 'swing',
                        duration:2000
                    }).promise().done(function(){destroy()});

                })
            });

        return{
            start:function(){
                that.trigger("myEventStart");
            },
            stop:function(){
                that.trigger("myEventEnd");
            },
            destroy:function(){
                console.log("distroy starts");
            }


        }
    }
})( jQuery, window , document );

$(".myButton").BackendProcess().start();
$(".myButton").BackendProcess().stop();

这是演示

4

2 回答 2

1

正如@Frederic 指出的那样，您遇到了事件的设计问题。on/off您可以通过使用来修复它，bind如下面的代码所示。它通过在初始化时关闭它们来删除所有重复的事件。

工作演示

;(function ( $, window, document, undefined ) {

    $.fn.BackendProcess = function(){

        var that = this;

        that.off();

        destroy = function(){
            console.log(arguments.callee.caller.toString());
        }

            that.on( "myEventStart", function( e ) {
                $(this).css({width:"500"});
            });

            that.on( "myEventEnd", function( e ) {
                setTimeout(function(){
                    $(that).animate({width :"100"},{
                        easing: 'swing',
                        duration:2000
                    }).promise().done(function(){destroy()});

                })
            });

        return{
            start:function(){
                that.trigger("myEventStart");
            },
            stop:function(){
                that.trigger("myEventEnd");
            },
            destroy:function(){
                console.log("distroy starts");
            }


        }
    }
})( jQuery, window , document );

$(".myButton").BackendProcess().start();
$(".myButton").BackendProcess().stop();
于 2013-10-07T09:51:20.640 回答
1

您正在将处理程序绑定到myEventStart并且myEventEnd每次都$.fn.BackendProcess()被调用。

由于您调用它两次，同一个处理程序被绑定两次到myEventEnd，所以两个动画并行执行，导致两个不同的承诺，两次调用console.log().

您将不得不修改您的设计，以便处理程序只绑定一次，即使$.fn.BackendProcess()被多次调用。

于 2013-10-07T09:46:09.660 回答