JQuery -延迟函数

Question

我有一个功能，可以在滚动/调整大小/加载时根据其他元素(包括固定的标题)将侧面导航定位到固定位置。顶部位置是在内容容器(#timelineFulltext)旁边或标题(.sticky)下面计算的。

问题是，位置在粘性标题隐藏之前就开始起作用了，这是另一个功能。

有没有办法延迟这个函数的执行：

jQuery(window).on('load scroll resize', function (){
// Position TOC on load, scroll and resize
var isSticky = jQuery('.sticky'); // Check if sticky header is present
if(isSticky.length && jQuery('#timelineFulltext').offset().top < jQuery(window).scrollTop()){
    var timelinePosition = isSticky.height() + 38;
}
else{
    var timelinePosition = jQuery('#timelineFulltext').offset().top - jQuery(window).scrollTop();
}
    jQuery('.fixed-timeline').css({'top': timelinePosition + 'px'});

 });

Answer 1

一种解决方案是使用setTimeOut。在这个例子中，在执行你的函数之前，它将等待3秒。

jQuery(window).on('load scroll resize',function() { 
       setTimeout(function() { 
          // Position TOC on load, scroll and resize
          var isSticky = jQuery('.sticky'); // Check if sticky header is present
          if(isSticky.length && jQuery('#timelineFulltext').offset().top < jQuery(window).scrollTop()){
          var timelinePosition = isSticky.height() + 38;
        }
        else{
          var timelinePosition = jQuery('#timelineFulltext').offset().top -     jQuery(window).scrollTop();
        }
        jQuery('.fixed-timeline').css({'top': timelinePosition + 'px'});

          }, 
       3000); 
    });

Answer 2

您可以创建一个函数，比如hideStickyBar来应用标题粘性条形图脚本。从jquery中的hide函数中调用此函数作为回调。请参见下面的示例代码

$('#elementTohide').hide(400, hideStickyBar);

jQuery(window).on('load scroll resize', function (){
   hideStickyBar();
});

function hideStickyBar() {
    // Position TOC on load, scroll and resize
   var isSticky = jQuery('.sticky'); // Check if sticky header is present
   if(isSticky.length && jQuery('#timelineFulltext').offset().top < jQuery(window).scrollTop()){
    var timelinePosition = isSticky.height() + 38;
   }
   else{
      var timelinePosition = jQuery('#timelineFulltext').offset().top - jQuery(window).scrollTop();
   }
   jQuery('.fixed-timeline').css({'top': timelinePosition + 'px'});
}