Javascript 在重新计算if-else语句的条件后，如何阻止调用JQuery函数？

我正在尝试为我的网站创建一个移动布局，但我在菜单部分遇到了问题。我所有的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);

var mobileNav=function（）{
如果（$（窗口）.width（）<751）{
$（'mobile#u nav'）.hide（）；
toggleNav（）；
}否则{
$（'mobile#u nav'）.show（）；
}
};
var toggleNav=函数（）{
$（'#页面导航栏'）。切换（函数（）{
$（'mobile#u nav'）.show（）；
}，函数（）{
$（'mobile#u nav'）.hide（）；
});
};
mobileNav（）；
$（窗口）。调整大小（mobileNav）；

出于某种原因，当我将浏览器的大小从小于751调整到更大时，toggleNav（）函数不会停止。即使我的浏览器在调整大小后大于751，当我尝试单击“页面导航栏”元素时，它也会切换显示/隐藏。其他函数（浏览器小时隐藏元素，浏览器大时显示元素）工作正常，但我不知道如何在窗口比最初调用时更大时停止toggleNav（）

如果这是一个简单的修复，我很抱歉。我对JQuery还比较陌生，我已经尝试了好几天了。我已经尽我所能尝试了.on/.off，在else之后切换.noop，并尝试重新排列所有内容（最初都是mobileNav变量下的一段代码）

---

感谢您的帮助。提前谢谢

这可能是由于竞争造成的，每次窗口发送调整大小事件时，您都会调用该函数（这意味着在调整大小过程中会花费大量时间）。然后toggleNav（）；在第4行，每次都会执行。有时DOM没有刷新其状态，即再次调用窗口大小回调函数并导致您描述的问题，为了避免此问题，我建议您执行以下操作：

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();
});

// 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);

我在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" */
}

---

很抱歉，我花了这么长时间才发现，但是没有抛出错误，所以我没有考虑太多，但是

.toggle（）

的函数签名实际上是

.切换（[持续时间][，完成]）

但是，使用它更像是传入两个函数：

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

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

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();
});

// 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);

//注意：尝试只创建一次jQuery对象并重用它们
$window=$（window）；
$mobile_nav=$（“#mobile_nav”）；
var mobileNav=函数（）{
如果（$window.width（）<751）{
$mobile_nav.hide（）；
}否则{
$mobile_nav.show（）；
}
};
mobileNav（）；
$（窗口）。调整大小（mobileNav）；

我希望这是你想要的

---

演示：

您的代码在我测试时看起来运行良好。还有更多的代码吗？快速测试（调整窗格和/或浏览器的大小）也可能在用户缩放页面时尺寸不正确。@Drakes感谢您的快速响应！我不能完全理解快速测试（对不起，我对这一切都是新手），但它是整个.js文件。我不认为还有什么东西会干扰上面的代码，但我真的不确定。再次感谢！非常感谢你！它起作用了！回顾代码，我真的想得太多了。我猜当我盯着同一对线看太久的时候，就会发生这种情况！再次感谢。