Блог

Я работаю над интерфейсом, который содержит несколько высокоинтенсивных SQL-запросов, затем отображает несколько диаграмм Google, которые в настоящее время вызываются через AJAX с использованием google.visualization.Объект запроса:

 var query = new google.visualization.Query('/report.ashx');
query.send(callbackMethod);
//....
function callbackMethod(rs){
    var data = rs.getDataTable();
    var graph = new google.visualization.AreaChart(target_div);
    graph.draw(data);
}
  

Поскольку интерфейс можно фильтровать динамически, я столкнулся со сценарием, в котором может выполняться запрос, в то время как пользователь потенциально может выбрать повторную фильтрацию и, следовательно, повторно запросить источник данных. Если первый запрос все еще выполняется, а второй запрос начинается и возвращается до первого запроса, то диаграмма будет отрисована просто отлично. Однако, когда первый запрос, наконец, завершится, он может полностью перезаписать диаграмму старыми данными, игнорируя текущие фильтры.

Я читал, что есть возможность передать объект jQuery AJAX, который предоставляет объект XHR, позволяющий мне вызвать .abort() в XHR, который отменит запрос (хотя это все равно будет обрабатываться на сервере, но это удар, который я готов принять). К сожалению, я не могу найти примеров этого, и документация Google менее чем полезна в этом отношении. Кто-нибудь сталкивался с тем же, и если да — решили ли они проблему?

Приветствия,

Крис.

Вы можете обернуть callbackMethod в функцию более высокого порядка, чтобы отслеживать время запроса, и использовать query.send(callback()) вместо query.send(callbackMethod) .

 var mostRecentReqTime;
var callback = function() {
  var reqTime = Date();
  return function() {
    if (reqTime < mostRecentReqTime) return;
    var data = rs.getDataTable();
    var graph = new google.visualization.AreaChart(target_div);
    graph.draw(data);
    mostRecentReqTime = reqTime;
  };
};