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(); 

here demo

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.

working demo

;(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

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -

debian - 500 Error upon login into Plesk Admin - auth.php3? -