javascript – Debounce jquery滚动事件

我只是有一个关于去抖动的一般问题.我在页面上的不同位置有三个菜单,当它们在滚动时从窗口顶部到达85px的位置时它们变得固定.当它们到达顶部时,它们分层重叠.我目前每个人都有一个功能,我希望尽可能地优化.我的阅读表明.offset.top计算非常费力.

我的问题是：我是否过度思考它,是否有必要在这种情况下进行辩解？如果我的解释是正确的,则在滚动时不断执行三个偏移计算.任何人都可以建议优化或交替解释为什么它不是必要的.

谢谢.

$(function(){
    // Check the initial Position of the fixed_nav_container
    var stickyHeaderTop0 = $('.fixed_heading_shop').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop0-85) {
                    $('.fixed_heading_shop').css({position: 'fixed', top: '85px'});  
                    $('.ghost_div0').css({display: 'block'});
            } else {
                    $('.fixed_heading_shop').css({position: 'relative', top: '0px'});
                    $('.ghost_div0').css({display: 'none'});
            }   

    });

  }); 


$(function(){
    // Check the initial Position of the fixed_nav_container
    var stickyHeaderTop1 = $('.fixed_heading_pricetable').offset().top;

     $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop1-85 ) {
                    $('.fixed_heading_pricetable').css({position: 'fixed', top: '85px'});  
                    $('.ghost_div1').css({display: 'block'});       
            } else {
                    $('.fixed_heading_pricetable').css({position: 'relative', top: '0px'});
                    $('.ghost_div1').css({display: 'none'});    
            }
         });

}); 



$(function(){
    // Check the initial Position of the fixed_nav_container
    var stickyHeaderTop2 = $('.fixed_heading_layout').offset().top;
     $(window).scroll(function(){    
            if( $(window).scrollTop() > stickyHeaderTop2-85) {
                    $('.fixed_heading_layout').css({position: 'fixed', top: '85px'});  
                    $('.ghost_div2').css({display: 'block'});
            } else {
                    $('.fixed_heading_layout').css({position: 'relative', top: '0px'});
                    $('.ghost_div2').css({display: 'none'});
            }
          });

}); 

解决方法:

对于这种情况,我认为这确实是一个偏好问题.看看网站在您给定的情况下如何响应,并在您认为用户体验受到负面影响时进行调整.我倾向于节流/去抖动滚动事件.

您可以采取一些措施来加速滚动处理程序(稍微).例如,如果你可以使用id,就像jQuery的optimizing selectors指南一样,例如$(‘#myElement’)很快,因为它使用document.getElementById.

如果您担心性能会有更多小调整：如果不需要呼叫,请不要拨打任何电话来调整css.即如果自上次触发滚动处理程序后没有任何更改. (见isFixed布尔值)

$(function(){
  var OFFSET = 85;
  var WAIT = 10;

  // Check the initial Position of the fixed_nav_container
  var stickyHeaderTop0 = $('.fixed_heading_shop').offset().top;
  var isFixed = false; // assuming that's the right default value

  $(window).scroll(_.throttle(function(){
    if($(window).scrollTop() > stickyHeaderTop0 - OFFSET) {
      if(!isFixed) {
        $('#fixed_heading_shop').css({position: 'fixed', top: OFFSET+'px'});
        $('#ghost_div0').css({display: 'block'});
        isFixed = true;
      }
    }
    else {
      if(isFixed) {
        $('#fixed_heading_shop').css({position: 'relative', top: '0px'});
        $('#ghost_div0').css({display: 'none'});
        isFixed = false;
      }
    }
  }, WAIT));
});

唯一重复的调用是$(window).scrollTop(),如果你可以组合所有的滚动处理程序(3？),那么你只需要在每个[throttled]滚动事件中进行一次调用.

标签：debouncing,javascript,jquery,optimization
来源： https://codeday.me/bug/20191003/1847338.html