Is there a way to optimize loading multiple graphs without freezing the browser for too long? I want each graph to appear on the screen as soon as it's created, rather than waiting for all of them to finish rendering.
I've tried using a similar "strategy" that worked in another part of my code, but it doesn't seem to be working here. Can you help troubleshoot?
The current code snippet:
var i = -1;
var total = 10;
function moveToTheNext() {
saySomething()
.then(function() {return $timeout(function(){},1000);})
.then(nextChart());
}
function saySomething() {
console.log('hey')
var deferred = $q.defer();
deferred.resolve();
return deferred.promise;
}
function nextChart() {
i++;
if (i <= total) {
// some stuff
chart[i] = new Highcharts.Chart({
//....
},moveToTheNext());
}
}
UPDATE: The issue was with the execution of the nextChart function
function moveToTheNext() {
saySomething()
.then(function() {return $timeout(function(){},1000);})
.then(function() {nextChart();});
}
Now everything is functioning correctly :)