JQuery resize performance issue

Question

I built a slider that moves left or right if some items are hidden. Obviously this needs to work responsively, so I am using a resize (smartresize) function to check when the browser is resized. It works, but after resizing when you click more (right arrow) it takes 2-5 seconds to actually calculate what is hidden and then execute.

Can anyone explain to me why this is happening, and how to possibly fix it?

Thanks!

$(window).smartresize(function () {
    var cont = $('#nav-sub-menu-2 .container');
    var ul = $('#nav-sub-menu-2 ul');
    var li = $('#nav-sub-menu-2 ul li');

    var amount = li.length;
    var width = li.width();
    var contWidth = cont.width();

    var ulWidth = width * amount;
    var remainder = ulWidth - contWidth;

    ul.width(ulWidth);

    if(remainder <= 0) {
        $('.more, .less').fadeOut();
    } else {
        $('.more').fadeIn();
    }

    $('.more').click(function() {
        ul.animate({ 'right' : remainder });
        $(this).fadeOut();
        $(".less").fadeIn();
    });

    $('.less').click(function() {
        ul.animate({ 'right' : 0 });
        $(this).fadeOut();
        $(".more").fadeIn();
    });


}).smartresize();

Answer 1

It could be because it is recalculating the screen size at every interval as you are resizing...

Try using a debouncer to delay the function calls until everything's settled.

/* Debounce Resize */
function debouncer( func , timeout ) {
   var timeoutID , timeout = timeout || 200;
   return function () {
      var scope = this , args = arguments;
      clearTimeout( timeoutID );
      timeoutID = setTimeout( function () {
          func.apply( scope , Array.prototype.slice.call( args ) );
      } , timeout );
   }
}

$( window ).resize( debouncer( function ( e ) {
    /* Function */
}));