Question

I have a function that makes a call that gets a Json Response and plots the data inside Google Plots… I do this function every 90 seconds so it updates my charts with the latest data….

This works great however whenever it is processing it seems to lock up the browser for a brief few seconds (even the loader freezes) I am okay if the graph part freezes but I do not want the Loader or other items to freeze I want the UI to still function while the graphs update.

Can someone help me maybe I should change the $.ajax

Here is the code:

function UpdateCharts() {
clearInterval(timerId);
BuildLineChart('power-chart', $('#datePower').val(), '1,28,32');
BuildLineChart('voltagecurrent-chart', currentDate, '13,15,17,5,7,9');
BuildLineChart('phasekw-chart', currentDate, '2,3,4');
BuildLineChart('phasevoltage-chart', currentDate, '13,15,17');
BuildLineChart('phasecurrent-chart', currentDate, '5,7,9,11');
timerId = setInterval(UpdateCharts, 90000);
}


// document ready function
$(document).ready(function() {
setTimeout(UpdateCharts, 5000);
});

Build line chart then does this:

 function onDataReceived(seriesData) {
            var p = $.plot(placeholder, seriesData.seriesData, options);
        }

        $.ajax({
            url: '/Charts/LineChart?SeriesToGraph=' + dataPoints + '&DatePull=' + chartDate,
            method: 'GET',
            async: false,
            cache: true,
            dataType: 'json',
            beforeSend: function() {
            $("." + placeHold + "-loader").html('<img src="/Assets/images/loaders/circular/066.gif" />');
            },
            complete: function() {
            $("." + placeHold + "-loader").html('');
            },
            success: onDataReceived
        });

Answer 1

async: false causes the browser to wait for the request to complete before it moves on. Change it to async: true and it won’t lock up the browser.