Question

如果某些项目被隐藏，我构建了一个向左或向右移动的滑块。显然这需要响应，所以我使用resize（smartresize）函数来检查浏览器何时调整大小。它可以工作，但是在你点击更多（右箭头）后调整大小，实际计算隐藏的内容然后执行需要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 */
}));

JQuery调整了性能问题

1 个答案: