在重新评估 if else 语句的条件后，如何停止调用 JQuery 函数？

Question

我正在尝试为我的网站创建移动布局，但我在使用菜单部分时遇到了问题。我的所有 CSS 都有效，我已将问题缩小到我的 JQuery，具体来说：

var mobileNav = function(){

    if($(window).width() < 751){
        $('#mobile_nav').hide();
        toggleNav();
    } else {
        $('#mobile_nav').show();
    }

};

var toggleNav = function(){

    $('#page_nav_bar').toggle(function(){
            $('#mobile_nav').show();
    }, function(){
            $('#mobile_nav').hide();
    });

};

mobileNav();

$(window).resize(mobileNav);

出于某种原因，当我将浏览器的尺寸从 751 以下调整为更大尺寸时，toggleNav() 函数不会停止。即使我的浏览器在调整大小后大于 751，当我尝试单击 #page_nav_bar 元素时，它也会切换 show/hide。其他功能（浏览器小时隐藏元素，大时显示）工作正常，但我不知道如何在 stop =27=] 比最初调用时大。

如果这是一个简单的修复，我很抱歉。我是 JQuery 的新手，几天来我一直在努力解决这个问题。我已经尽我所能尝试了 .on/.off，在 else 之后切换 .noop，并尝试重新排列所有内容（最初它是 mobileNav 变量下的所有代码块）。

感谢任何帮助。提前致谢！

Answer 1

这可能是由于竞争，每次 window 调度调整大小事件时您都会调用该函数（这意味着在调整大小时会花费很多时间）。然后 toggleNav(); at line4 也每次都执行。有时 DOM 没有刷新它的状态， window 调整大小回调函数再次被调用并导致您描述的问题，为了避免这个问题，我建议您执行以下操作：

resizeTimeout = null; //timeOut Timer Reference
$(document).ready(function(){ //called when Dom is ready (start up function)
    $(window).resize(function(){ 
    if(!resizeTimeout) //if there is no timeOut initialized
        resizeTimeout = setTimeout(function(){ //execute this anomymous function avec 100 milliseconds
            mobileNav();
            resizeTimeout = null;
            },100);
    })
    mobileNav();
});

我在window.resize的回调函数中使用setTimeout是因为以下原因：

避免在每次调整大小回调时调用 ToogleNav 函数（小优化）
确保在 DOM 刷新其状态后执行

您可以使用 css 轻松解决此问题：

#mobile_nav,
#mobile_nav.hidden{ display: none; } /* Hidden by default (mobile first) */
#mobile_nav.visible{ display: block } /* Visible by default only when using class="visible" */

@media (min-width: 751px  ) {
    #mobile_nav { display:block; } /* Visible by default only when the width is >= 751px */
    #mobile_nav.hidden{ display: none; } 
    #mobile_nav.visible{ display: block } class="visible" */
}

Answer 2

很抱歉，我花了这么长时间才发现，但没有抛出任何错误，所以我没有多想，但 .toggle() 的函数签名实际上是

.toggle( [duration ] [, complete ] )

但是，您使用它更像是 hover 传递两个函数：

$('#page_nav_bar').toggle(function(){
    $('#mobile_nav').show();
}, function(){
    $('#mobile_nav').hide();
});

由于实际上 没有动画发生并且问题中没有提到它，我假设您不关心缓慢淡入淡出ins/outs。如果是这种情况，您可以像下面这样简化您的代码：

// NOTE: Try to only create jQuery objects once and reuse them
$window = $(window);
$mobile_nav = $("#mobile_nav");

var mobileNav = function() {
    if ($window.width() < 751) {
        $mobile_nav.hide();
    } else {
        $mobile_nav.show();
    }
};

mobileNav();
$(window).resize(mobileNav);

我希望这就是您要找的。

演示： JSbin

在重新评估 if else 语句的条件后，如何停止调用 JQuery 函数？

How do I stop a JQuery function from being called after conditions for an if else statement are reevaluated?

html

javascript

jquery

resize