jQuery调整性能问题

Question

我构建了一个滑块，如果某些项目被隐藏，该滑块将向左或向右移动。显然，这需要响应性地工作，因此我使用调整大小（更智能）功能来检查浏览器何时调整大小。它有效，但是在单击更多（右箭头）时调整大小后，实际计算隐藏的内容需要2-5秒。

谁能向我解释为什么会发生这种情况，以及如何解决它？

谢谢！

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

可能是因为它在调整大小时都在每个间隔重新计算屏幕大小...

尝试使用辩论者延迟函数调用直到一切解决。

/* 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 */
}));