Uncaught Rangeerror: Maximum call stack size exceeded

Asked

Viewed 1,545 times

1

Uncaught Rangeerror: Maximum call stack size exceeded

function updateAnalysers(id) {

    var canvas = document.getElementById(id);

    canvasWidth = canvas.width;    
    canvasHeight = canvas.height;
    analyserContext = canvas.getContext('2d');

    {
        var fils = Math.round(canvasWidth / 3);
        var byts = new Uint8Array(analyserNode.frequencyBinCount);

        analyserNode.getByteFrequencyData(byts); 

        analyserContext.clearRect(0, 0, canvasWidth, canvasHeight);
        analyserContext.fillStyle = 'GRAY';
        analyserContext.lineCap = 'round';

        var multiplier = analyserNode.frequencyBinCount / fils;

        for (var i = 0; i < fils; ++i) {
            var magnitude = 0;
            var offset = Math.floor( i * multiplier );

            for (var j = 0; j< multiplier; j++)
                magnitude += byts[offset + j];
                magnitude = (magnitude / multiplier) + 2;

            analyserContext.fillRect(i * 3, canvasHeight, 1, -magnitude);
        }
    }

    rafID = window.requestAnimationFrame( updateAnalysers("analyser") );
}

Error occurs on this last line: 

rafID = window.requestAnimationFrame( updateAnalysers("analyser") );

How to fix?

javascript

  • That function is calling itself in loop, hence the error....

  • Now, she shouldn’t be doing this, she started doing this when I put her in the "Analyser" parameter, @Sergio

  • @Sergio when I leave her just like this: rafID = window.requestAnimationFrame( updateAnalysers ); works that is a beauty

  • Try replacing rafID = window.requestAnimationFrame( updateAnalysers("Analyser") ); by rafID = window.requestAnimationFrame( updateAnalysers(id) );

  • It works because you are passing the function to be run inside the other function, when you run the function inside itself it is error.

  • @Sergio then there is no way I pass the variable?

Show 1 more comment

1 answer

4


The mistake is because you are calling the function within itself, endlessly, here:

rafID = window.requestAnimationFrame( updateAnalysers("analyser") );

In fact the requestAnimationFrame expects to receive a reference to a function, but instead of passing a reference you are calling the function. Passing the reference would be like this:

rafID = window.requestAnimationFrame( updateAnalysers );

But in this case you would fail to pass the parameter. To pass the cast parameter, you can do a bind:

var funcaoDeUpdate = updateAnalysers.bind(null, id);
rafID = window.requestAnimationFrame( funcaoDeUpdate );

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.