Hi i am creating a batch update for my local store using for loop and async ajax call.
My problem is that my loop continues even though my ajax call still not yet successfully finished.
How can we manage to make for loop wait unit the response of the ajax response before continuing the loop?
Any help is appreciated. Thanks!!!
Below is my sample code:
var counter =0;
var totalRow = 3000;
for (var i = 0, l = totalRow; counter <= l; i++) {
var defectssurl = 'https://test.com/mywcf.svc/GetListAllPaging?id=' + counter;
Ext.Ajax.request({
url: defectssurl,
method: "POST",
params: '',
success: function (resp) {
console.log("load first 500 records");
var data = Ext.JSON.decode(resp.responseText); //encode Json List
if (counter == 0) {
defectsLocalStore.getProxy().clear();
// Also remove all existing records from store before adding
defectsLocalStore.removeAll();
}
Ext.Array.each(data, function (record) {
counter = counter + 1;
defectsLocalStore.add(record);
});
defectsLocalStore.sync(); // The magic! This command persists the records in the store to the browsers localStorage
//records is now same as the total records
if (counter >= totalRow) {
pCallback();
}
//continue loop
},
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
failure: function (resp) {
}
});
}
Please don't use "for loop". Instead in the success callback increase the counter and re-trigger itself. something like below.