Javascript control data flow by JSON

Question

I have a web application makes in JQuery + KnockOut that reads all data in a JSon format from a web service. The data are reloaded and reparse every seconds with this code (there are three Json flow):

setInterval(function () {
    loadCommon();
    loadLive();
    loadDashboard();
}, 1000);

The problem is when a data is update from the page itself. Infact I have a control (such say a textbox) that send in post the data to the service. It validate it and, in case, update the codebase behind. The code to make that is simple:

$('#textbox-1').blur(function () {
    savePost("Dash_textbox1:" + $('#textbox-1').val());
});
function savePost(data) {
    "use strict";
    console.log("POOOOOOOOSSSSSSSSSTTTTT : " + data);
    $.ajax({
        url: save_data_url,
        type: 'POST',
        data: data
    });
}

Everything goes correctly except for one thing. Let's assume that everything began at 08.00.01 AM....please look here:

08.00.01 AM >>> Interface loaded the LoadCommon,LoadLive,LoadDashboard has called >>> textbox-1 has 10 as initial value >>> FINE

08.00.02 AM >>> Interface loaded load again >>> textbox-1 has 10 >>> FINE

08.00.03 AM >>> Interface loaded load again >>> textbox-1 has 10 >>> FINE

08.00.04 AM >>> Interface loaded load again >>> textbox-1 has 10 >>> FINE

08.00.045 AM >>> User put the value of 5 in textbox-1 and the data will send to the webservice >>> textbox-1 has 5 (the user change) >>> FINE

08.00.5 AM >>> Interface loaded load again >>> textbox-1 has 10 because the service does not finish to process the 08.00.045 data sent to post >>> WROOOOONG

08.00.6 AM >>> Interface loaded load again >>> textbox-1 has 5 because the service have finish to process the 08.00.045 data sent to post >>> FINE

The visual effect is that the textbox-1 change it's value rapidly from 10 to 5 after again 10 and after again 5. I have no power on the webservice and also it can happen that (for certain reason) the service does not update the data to 5 so it is right to put again at 10, so how can I handle that flow in Javascript?

Thanks

Answer 1

guard your data change like this:

var processing_update = false;

setInterval(function () {
  if (processing_update) return;

  loadCommon();
  loadLive();
  loadDashboard();
}, 1000);

function savePost(data) {
  "use strict";
  console.log("POOOOOOOOSSSSSSSSSTTTTT : " + data);

  processing_update = true;

  $.ajax({
    url: save_data_url,
    type: 'POST',
    data: data,
    complete: function() {
      // all done
      processing_update = false;
    }
  });
}