javascript 未捕获的 RangeError:超出最大调用堆栈大小

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24061682/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 02:06:02  来源:igfitidea点击:

Uncaught RangeError: Maximum call stack size exceeded

javascriptjquerysetinterval

提问by Holly

I'm sometimes getting an error in my chrome console saying 'Uncaught RangeError: Maximum call stack size exceeded'I'm not sure what is causing it but I believe it is to do with a JavaScript setInterval method I'm using in my .js file.

我有时会在我的 chrome 控制台中收到一个错误,说“未捕获的范围错误:超出最大调用堆栈大小”我不确定是什么原因造成的,但我相信这与我在我的 . js文件。

I'm using the setInterval method to hide a sticky top nav after 4 seconds of inactivity by the user, the sticky nav reappears after the user moves their mouse or makes a keypress.

我使用 setInterval 方法在用户不活动 4 秒后隐藏粘性顶部导航,粘性导航在用户移动鼠标或按键后重新出现。

Also, while the below code is working as described in Chrome, in Firefox it only works once, i.e. the sticky nav is hidden once & reapears on mouse/keypress but does not disappear again.

此外,虽然下面的代码按照 Chrome 中的描述工作,但在 Firefox 中它只工作一次,即粘性导航隐藏一次并在鼠标/按键上重新出现但不会再次消失。

What may be causing this error?

什么可能导致此错误?

Why is Firefox behaving differently to Chrome?

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

I think may be making an error in how I'm using the setInterval method. In the code below, I set the interval at the beginning & clear the interval once the user clicks on the nav button (i.e. .mk-nav-responsive-link), I then re-start the interval method when the user clicks on the nav button to close the menu.

我认为我使用 setInterval 方法的方式可能会出错。在下面的代码中,我在开始时设置间隔并在用户单击导航按钮(即.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 -->

回答by Sam P

You need to move your mousemove event out of the intervalfunction. You're killing your CPU by rebinding the event every second. This event only needs to be bound once.

您需要将 mousemove 事件移出该interval函数。你通过每秒重新绑定事件来杀死你的 CPU。此事件只需要绑定一次

Remember that it's expensive to bind events on a large scale. Try to minimize your bindings at all times.

请记住,大规模绑定事件是昂贵的。始终尽量减少绑定。

You only bind it once. #YOBO

你只绑定一次。#YOBO