When resize() in JQuery, trigger fires multiple times -

i use paul irish smartresize when resize window function inside resize() fires multiple times causing accordion not work properly. have idea why happens? here code running: http://jsfiddle.net/rebel2000/pnah7/6/

          $(document).ready( function(){               (function($,sr){                // debouncing function john hann               // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/               var debounce = function (func, threshold, execasap) {                   var timeout;                    return function debounced () {                       var obj = this, args = arguments;                       function delayed () {                           if (!execasap)                               func.apply(obj, args);                           timeout = null;                       };                        if (timeout)                           cleartimeout(timeout);                       else if (execasap)                           func.apply(obj, args);                        timeout = settimeout(delayed, threshold || 100);                   };               }                 // smartresize                 jquery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };              })(jquery,'smartresize');              function anim3() {                 $('#button').click(                     function(){                         if($(this).hasclass('active')){                             $(this).animate({ "height": "30px"}, { queue:true, duration: 900 });                             $(this).removeclass('active');                             return false;                         } else {                                              $(this).animate({ "height": "100px"}, { queue:true, duration: 900  });                             $(this).addclass('active');                             return false;                         }                     }                 );                                 }          //anim3();          $(window).smartresize(function(){              anim3();          });                }); 

that happens because when re-sizing, re-size event fires multiple times. teorically(more illustration purposes) when javascript loop goes through verification of window size detects smaller/larger before , fires again. loop fast multiple fires, during "single" re-size.

you can this:

var idcounter = 0; $(window).smartresize(function(){   var myid=(++idcounter);   settimeout(function(){     if(myid===idcounter){        anim3();     }   }, 500); // 500 milli user wont notice } 

this should safely ignore multiple fires , process on last one. (unless take lots of time resize, in case can increase timeout)