javascript - JQuery 调整大小性能问题

Question

我构建了一个 slider ，如果某些项目被隐藏，它可以向左或向右移动。显然，这需要响应式地工作，因此我使用调整大小(智能调整大小)函数来检查浏览器何时调整大小。它可以工作，但是在调整大小后，当您单击“更多”(右箭头)时，需要 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 */
}));