javascript - jquery animate complete using promise calling twice -
in jquery-plugin, after completing animation, getting called "destroy" function twice.. 1 correct me wrongs do?
function:
;(function ( $, window, document, undefined ) { $.fn.backendprocess = function(){ var = 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();
as @frederic pointed out have got design issue events. can fix using on/off
instead bind
shown in code below. removes duplicate events turning them off @ initialisation.
;(function ( $, window, document, undefined ) { $.fn.backendprocess = function(){ var = 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();
Comments
Post a Comment