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.
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.
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.
What may be causing this error?
Why is Firefox behaving differently to 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.
<!-- 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 -->
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.
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.
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.
What may be causing this error?
Why is Firefox behaving differently to 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.
<!-- 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 -->
- 2 Move your mousemove event out of the interval fn. This may not be the problem, but you're rebinding it every second. That's not good mojo. You only bind it once. #YOBO – Sam P Commented Jun 5, 2014 at 13:39
- 1 I have a hunch that two intervals are being run simultaneously somehow. Add two different console logs to the two spots you set the interval and test if that's the case. – Sam P Commented Jun 5, 2014 at 13:42
- 1 @SamP Thank you, moving the mousemove event outside of the function seems to have fixed it :) The console error is no longer appearing. – Holly Commented Jun 5, 2014 at 13:51
- can you post you html? I'm trying to reproduce this but i'm really missing the elements. jsbin.com/yiqemu/1/edit – rafaelcastrocouto Commented Jun 5, 2014 at 13:53
1 Answer
Reset to default 16You need to move your mousemove event out of the interval function. You're killing your CPU by rebinding the event every second. This event only needs to be bound once.
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