Question

我有时会在Chrome控制台中收到错误＆＃39; Uncaught RangeError：超出最大调用堆栈大小＆＃39; 我不知道导致它的原因是什么但我相信它是在我的.js文件中使用的JavaScript setInterval方法。

我使用setInterval方法在用户停用4秒后隐藏粘性顶部导航，粘性导航会在用户移动鼠标或进行按键后重新显示。

此外，虽然下面的代码正如Chrome中所描述的那样工作，但在Firefox中它只能工作一次，即粘性导航只隐藏一次＆amp;在鼠标/按键上重新开始，但不会再次消失。

可能导致此错误的原因是什么？

为什么Firefox的行为与Chrome不同？

我认为可能在我如何使用setInterval方法时出错。在下面的代码中，我设置了开头的间隔＆amp;一旦用户点击导航按钮（即.mk-nav-responsive-link）清除间隔，我就会在用户点击导航按钮关闭菜单时重新启动间隔方法。

<!-- CODE ABOVE OMITTED FOR BREVITY -->

    // Hide Nav on User Inactivity START
    var userInactivity = 1;
    var userInactivityInterval = setInterval(function(){userInactivityTimer()},1000);
    function userInactivityTimer(){
        if(userInactivity == 4 && jQuery(window).scrollTop() > (vh/8)){
            jQuery('.mk-nav-responsive-link img').fadeOut();
            userInactivity = 1;
        }
        userInactivity = userInactivity+1;
//        console.log(userInactivity);
//        console.log(jQuery(window).scrollTop());

        jQuery(document).bind('mousemove keypress', function() {
            jQuery('.mk-nav-responsive-link img').fadeIn();
            userInactivity = 1;
        });
    }
    // Hide Nav on User Inactivity END

    // CUSTOM DROP DOWN MENU TRANSITIONS START
    jQuery('.mk-nav-responsive-link').toggle(function() {
      // RESPONSIVE FIX TO SHOW THE ENTIRE DROP DOWN MENU ON SMALL HEIGHT SCREENS
      if (jQuery(window).height() < 405) {
            jQuery("#mk-responsive-nav").css('height','581px');
            jQuery("#responsive-nav-bg").animate({
            top:'0',
            height:'575px'
          },175, 'linear');
        } else {
            jQuery("#responsive-nav-bg").animate({
            top:'0',
            height:'100vh'
          },175, 'linear');
        }
      jQuery(".mk-desktop-logo").attr('src',"/wp-content/themes/jupiter-child/images/EW-logo-white.png");
      jQuery(".mk-nav-responsive-link > img").attr('src',"/wp-content/themes/jupiter-child/images/x-close-menu.png");
      jQuery(".mk-nav-responsive-link > img").css('padding-top','0');
      jQuery(".mk-nav-responsive-link > img").css('padding-right','0');
      jQuery('.mk-go-top.on').css({'display' : 'none'});
      jQuery('.mk-desktop-logo').css({'position' : 'fixed'});
      clearInterval(userInactivityInterval);

    }, function() {
        jQuery("#responsive-nav-bg").animate({
        top:'87px',
        height:'0'
      },250, 'linear');
      if (jQuery(window).width() < 405) {
            jQuery(".mk-desktop-logo").attr('src',"/wp-content/themes/jupiter-child/images/EW-logo-responsive.png");
        } else {
            jQuery(".mk-desktop-logo").attr('src',"/wp-content/uploads/EW-logo.png");
        }
      jQuery(".mk-nav-responsive-link > img").attr('src',"/wp-content/themes/jupiter-child/images/burger-menu-icon.png");
      jQuery(".mk-nav-responsive-link > img").css('padding-top','10px');
      jQuery(".mk-nav-responsive-link > img").css('padding-right','5px');
      jQuery('.mk-go-top.on').css({'display' : 'inline-block'});
      jQuery('.mk-desktop-logo').css({'position' : 'relative'});
      userInactivityInterval = setInterval(function(){userInactivityTimer()},1000);
    });
    // CUSTOM DROP DOWN MENU TRANSITIONS END

<!-- CODE BELOW OMITTED FOR BREVITY -->

Answer 1

您需要将mousemove事件移出interval功能。您通过每秒重新绑定事件来杀死CPU。此事件只需要绑定一次。

请记住，大规模绑定事件的代价很高。尽量减少绑定。

你只绑定一次。 #YOBO

未捕获RangeError：超出最大调用堆栈大小

1 个答案: