Javascript - 滚动事件的效率，仅运行一次代码

Javascript - Efficiency for scroll event, run code only once

本文关键字：代码 一次 运行 滚动 事件 效率 Javascript      更新时间：2023-09-26

这些if语句总是让我头晕目眩。如果页面带有标题，并且在标记中隐藏了标题。

<div id="headerfloat" style="display:none;">
    <p>Floated header</p>
</div>
<div id="header">
    <p>Header</p>
</div>

这个想法是，每当页面向下滚动超过 225px 时，#headerfloat就会出现，当 topScroll 小于 225px 时消失。我设法让它与javascript和jQuery一起工作，但是当我在iPhone上测试它时，它非常缓慢。我很确定这是因为代码在每个滚动事件中运行。即使#headerfloat可见，代码仍会执行。即使那时不必如此。

因此，我需要确保代码仅在需要时运行一次。我的第一个想法是添加和删除.open和.closed等类#headerfloat。并在滚动事件期间对这些语句运行 if 语句。但这是最有效的方法吗？

到目前为止，我丑陋的片段：

jQuery(window).scroll(function () {
    var headerfloat = $("#header_float");
    var top = jQuery(window).scrollTop();
    if (top > 225) // height of float header
    {
        if (!$(headerfloat).hasClass("closed")) {
            $(headerfloat).addClass("boxshadow", "", 100, "easeInOutQuad").slideDown().addClass("open").removeClass("closed");
        }
    } else {
        $(headerfloat).removeClass("boxshadow", "", 100, "easeInOutQuad").removeClass("closed").slideUp();
    }
});

编辑：所以在laconbass的出色响应之后，这就是我最终得到的代码：

var mainHeader = $('#header')
          , top_limit = mainHeader.outerHeight()
          , $window = $(window)
        ;
        var header_float = $('#header_float')
        bindEvent();
        function bindEvent() {
            $window.scroll( scrollEvent );
        }
        function scrollEvent() {
            var top = $window.scrollTop();
            // avoid any logic if nothing must be done
            if ( top < top_limit && !header_float.is(':visible')
                || top > top_limit && header_float.is(':visible')
            ) return;
            // unbind the scroll event to avoid its execution
            // until slide animation is complete
            $window.unbind( 'scroll' );
            // show/hide the header
            if ( top > top_limit ) {
                header_float.slideDown( 400, bindEvent );
            } else {
                header_float.slideUp( 400, bindEvent );
            }
        };

你开始的片段似乎有点丑陋。

我在jsfiddle上制作了一个供您娱乐和参考

我假设了以下内容：

  • 您希望在页面向下滚动时有一个fixed定位的标题(也称为 fixed header (。
  • fixed headed 是页面主标题的克隆，类 fixed 。
  • 当页面向下滚动超过页眉高度时，将显示fixed header。
  • 当页面向上滚动到足以显示主页标题时，fixed header将被隐藏。

性能提示：

  • 缓存 jQuery 对象以避免每次执行事件处理程序时进行新查询。
    • 在
  • 显示/隐藏动画之前取消绑定事件处理程序，之后重新绑定。
  • 在事件处理程序上，尽可能尽快返回以避免不必要的逻辑。请记住，当JavaScript被执行时，浏览器渲染过程被阻止。
var mainHeader = $('header')
  , header = mainHeader.clone().addClass('fixed').appendTo('body')
  , top_limit = header.outerHeight()
;
bindEvents();
function bindEvents() {
    $(window).scroll( scrollEvent );
}
function scrollEvent() {
    var top = $(window).scrollTop();
    // avoid any logic if nothing must be done
    if ( top < top_limit && !header.is(':visible')
        || top > top_limit && header.is(':visible')
    ) return;
    // unbind the scroll event to avoid its execution
    // until slide animation is complete
    $(window).unbind( 'scroll' );
    // show/hide the header
    if ( top > top_limit ) {
        header.slideDown( 400, bindEvents );
    } else {
        header.slideUp( 400, bindEvents );
    }
};

<header>
    <h1>Awesome header</h1>
</header>
<div>
    <!-- the page content -->
</div>

/* the real code needed */
header.fixed {
    display: none;
    position: fixed;
    top: 0;
}

两种方式：

1，在滚动时，如果您已经完成了所需的操作，请删除滚动事件。

2，var一个变量，默认为false，滚动时，如果变量

为false，你想要做什么，并将变量设置为true;如果变量已经是true，则什么都不做(或其他你想要的(

相关文章：