Uncaught RangeError: Maximum call stack size exceeded

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") );
}

The error occurs on this last line:

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

How do I fix it?

    
asked by anonymous 13.07.2015 / 19:07

1 answer

4

The error is because you are calling the function within itself, endless times, here:

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

Actually requestAnimationFrame expects to receive a reference to a function, but instead of passing a reference you are invoking the function. Passing the reference would look like this:

rafID = window.requestAnimationFrame( updateAnalysers );

But in this case you would stop passing the parameter. In order to pass with the parameter cast, you can do a bind :

var funcaoDeUpdate = updateAnalysers.bind(null, id);
rafID = window.requestAnimationFrame( funcaoDeUpdate );
    
13.07.2015 / 20:53