Uncaught RangeError: Maximum call stack size exceeded

Question

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. ``…

Accepted Answer

You 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

Uncaught RangeError: Maximum call stack size exceeded

Solution

Problem