We Keep Coding

How to ensure that a function containing multiple $.ajax calls runs fully synchronously and also allows for browser repaints as it executes

I've been working on getting a function written to:
1) Process an input array using $.ajax calls to fill an output array (below this is inputList)
2) Below is what I have, but I'm having issues with it:
requestData(), when I call it, runs straight through to processing the outputList array without having fully populated/filled it - it puts one value into it then starts to process that, but the function still apparently runs on seperately to the subsequent processing asynchronously. I need it to be fully synchronous so that it does not return until the inputList array has been fully processed.
I'm not seeing the browser repainting the div that has its html updated on every call of the runajax() function - I'm attempting to do this with a setTimeout.
3) I've set the ajax request to be synchronous (async : false) - but this doesn't seem to help
I've tried to use jQuery's $.when to provide an ability to ensure that everything gets called in sequence - but clearly I'm not doing this correctly.
Would appreciate any help - I've asked previous related questions around this and had some useful help - but I've still not resolved this!
Thanks
//declare holding function requestData - expects a non-empty input data array named inputList
function requestData() {
//declare inner function runajax
function runajax() {
if(inputList.length > 0) {
//get first item from inputlist and shorten inputList
var data = $.trim(inputList.shift());
function getData() {
//send the data to server
return $.ajax({
url: 'sada_ajax_fetch_data.php',
cache: false,
async: false,
method: "post",
timeout: 2000,
data: {
requesttype: "getmydata",
email: encodeURIComponent(data)
}
});
}
function handleReturnedData (response) {
response = $.trim(decodeURIComponent(response));
//update the div inner html
if(response == "Failed") {
$('#fetchupdatestatus').html('There was an error retrieving the data you requested!');
} else {
$('#fetchupdatestatus').html('The item returned was '+response);
}
//add the response from ajax to the end of the outputList array
outputList.push(response);
//set up the next ajax call
var doNextBitOfWork = function () {
runajax();
};
//call setTimeout so that browser shows refreshed div html
setTimeout(doNextBitOfWork, 0);
//return
return $.when();
}
//do the next ajax request and response processing
return getData().done(handleReturnedData);
} else {
//did the last one so return
return $.when();
}
}
//kick off the ajax calls
runajax();
}
var inputList = new Array();
var outputList = new Array();
.....load +/- 100 values to be processed using ajax into array inputList
requestData();
.....process stuff in array outputList
.....etc

There was my answer with "you're doing it wrong" earlier, but then I just decided to show, how you can do it (almost) right: https://jsfiddle.net/h4ffz1by/
var request_maker = {
working: false,
queue: [],
output: [],
requestData: function(inputList) {
if (request_maker.working == true) {
return false;
}
request_maker.output = [];
request_maker.working = true;
while (inputList.length > 0) {
var data = $.trim(inputList.shift());
request_maker.queue.push(data);
}
console.log(request_maker.queue);
request_maker.doTheJob();
return true;
},
doTheJob: function() {
current_data_to_send = request_maker.queue.shift();
console.log(current_data_to_send);
if (typeof current_data_to_send != 'undefined' && request_maker.queue.length >= 0) {
$.ajax({
url: '/echo/json/',
cache: false,
method: "post",
timeout: 2000,
data: {
requesttype: "getmydata",
email: encodeURIComponent(current_data_to_send)
},
success: function(data, status, xhrobject) {
console.log(xhrobject);
request_maker.handleReturnedData(data);
},
});
} else {
request_maker.working = false;
console.log('all data has been sent');
}
},
handleReturnedData: function(response) {
console.log(response);
response = $.trim(decodeURIComponent(response));
//response= 'Failed';//uncomment to emulate this kind of response
if (response == "Failed") {
$('#fetchupdatestatus').append('There was an error retrieving the data you requested!<br/>');
} else {
$('#fetchupdatestatus').append('The item returned was ' + response + '<br/>');
request_maker.output.push(response);
}
request_maker.doTheJob();
if (request_maker.working == false) {
console.log('all requests have been completed');
console.log(request_maker.output);
}
}
}
inputList = [1, 2, 3, 4, 5, 6];
if (request_maker.requestData(inputList)) {
console.log('started working');
}
if (!request_maker.requestData(inputList)) {
console.log('work in progress, try again later');
}
Note that I've changed request path to jsfiddle's ajax simulation link and replaced html() with append() calls to print text in div. The calls are made and get handled in the same order as it is in inputList, still they don't lock user's browser. request_maker.output's elements order is also the same as in inputList.
Have in mind, that you will need to add error handling too (probably just a function that pushes 'error' string into output instead of result), otherwise any ajax error (403/404/502, etc.) will get it "stuck" in working state. Or you can use complete instead of success and check request status right there.
UPD: Answer to the question: you cannot get both. You either use callbacks and let browser repaint inbetween asynchroneous requests or you make requests synchroneous and block browser untill your code finished working.
UPD2: There actually is some information on forcing redraw, however I don't know if it will work for you: Force DOM redraw/refresh on Chrome/Mac

"Cannot call method 'transaction' of undefined" error in indexedDB

Below is my code. It runs fine for the first time but once I refresh the page it generates an uncaught TypeError: Cannot call method 'transaction' of undefined.
Basically I retrieve from data from a database and encode it into a usable JSON datatype to avoid insert issues into my tables.
$(document).ready( function() {
//prefixes of implementation that we want to test
window.indexedDB = window.indexedDB ||
window.mozIndexedDB ||
window.webkitIndexedDB ||
window.msIndexedDB;
//prefixes of window.IDB objects
window.IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction ||
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange ||
window.webkitIDBKeyRange ||
window.msIDBKeyRange
if(!window.indexedDB){ //alert user if browser does not support
window.alert("Your browser doesn't support a stable version of IndexedDB.")
}
var request = window.indexedDB.open("runningClub", 1); //create a runningClub database
var browserDB;
request.onsuccess = function(event){
browserDB = request.result;
};
var raceIDs = [];
$(".raceID").each( function () {
raceIDs.push(" raceID = " + $(this).val());
});
$.ajax({
url: 'controller/AJAX/userAction.php',
type: 'post',
dataType: 'json',
data: { statement : "getRaceResult", raceIDs : raceIDs },
success: function(data) {
const results = data;
request.onupgradeneeded = function(event){
var browserDB = event.target.result;
var objectStore = browserDB.createObjectStore("raceResult", {keyPath: "resultID"});
for(var i in results){
objectStore.add(results[i]);
}
}
var objectStore = browserDB.transaction("raceResult").objectStore("raceResult");
objectStore.openCursor().onsuccess = function(event){
var cursor = event.target.result;
if (cursor){
$("#memberName").append("<option>" + cursor.value.memberName + "</option>");
cursor.continue();
}
};
}
});
});

Thanks for posting the (almost) entirety of your code. Unfortunately I can't fully replicate your issue without knowing the structure of the data object coming from your backend. Mind publishing that as well?
That said, I'm rather certain your issue is the use of const.
const results = data;
I do not believe this type of data to be "structured clone"-able. Given that JSON is fully clonable, which is what I imagine to be returned from your API (vs. e.g. JavaScript that could be evaulated to produce a function), the usage of this keyword seems the likely culprit of your issues.
Update 1 Working through this, quite a few issues with your async programming.
database is opened before ajax request, rather than after successful callback. seems prudent to move this into the callback.
browserDB is defined in a success callback that isn't guaranteed to run before the async operation completes (thus browserDB becomes undefined)
request.onsuccess is called twice (you may not have realized this, because it's weird behavior): both when no upgradeneeded event fires and when an upgradeneeded event fires, so you're redefining browserDB perhaps accidentally when the DB doesn't yet exist
Update 2 Here's a mostly working, simplified Fiddle. I'm sad at how much time I spent making your code work.
More issues (beyond const):
hardcoded database version
reusing versionchange event for adding/getting data is a bad idea
need to use a readwrite transaction to add data
openCursor - but don't supply parameters for resultID keypath
you are not listening for successful adds before getting the data
you are not chaining your success events for adds before getting the data
The current loop approach was untenable. But I got it working with a single add and a cursor get. You can refactor back into a multiple-add approach but you'll need to watch your async (based on what I see, I'd suggest you stick with simple).
$.ajax({
url: '/echo/json/',
type: 'post',
dataType: 'json',
data: {
json: JSON.stringify({
resultID: new Date().getTime(),
raceID: "1",
memberID: "824",
runtime: "00:31:26",
memberName‌: "Mark Hudspith"
})
},
success: function (data) {
var request,
upgrade = false,
doTx = function (db, entry) {
addData(db, entry, function () {
getData(db);
});
},
getData = function (db) {
db.transaction(["raceResult"], "readonly").objectStore("raceResult").openCursor(IDBKeyRange.lowerBound("0")).onsuccess = function (event) {
var cursor = event.target.result;
if (null !== cursor) {
console.log("YOUR DATA IS HERE", cursor.value.memberName‌);
cursor.continue();
}
};
},
addData = function (db, entry, finished) {
var tx = db.transaction(["raceResult"], "readwrite");
tx.addEventListener('complete', function (e) {
finished();
});
tx.objectStore("raceResult").add(entry);
};
request = window.indexedDB.open("runningClub");
request.onsuccess = function (event) {
if (!upgrade) {
doTx(request.result, data);
}
};
request.onupgradeneeded = function (event) {
var db = event.target.result;
db.createObjectStore("raceResult", {
keyPath: "resultID"
});
setTimeout(function () {
doTx(db, data);
}, 5000);
}
}
});

How to stop all active or pending ajax requests?

In my rails app, using jquery slider. In stop event of slider, there is ajax request. If user continuously sliding slider there are too many pending ajax requests and my system get hang. I have used:
1:
function slide_stop(event, ui){
$.xhrPool = [];
$.xhrPool.abortAll = function() {
$(this).each(function(idx, jqXHR) {
jqXHR.abort();
});
$.xhrPool.length = 0
};
$.ajaxSetup({
beforeSend: function(jqXHR) {
$.xhrPool.push(jqXHR);
},
complete: function(jqXHR) {
var index = $.xhrPool.indexOf(jqXHR);
if (index > -1) {
$.xhrPool.splice(index, 1);
}
}
});
$.xhrPool.abortAll();
$('span#imgLoader').html('<img src="/assets/ajax-loader.gif">');
$.ajax({
type: 'get',
dataType: 'json',
url: 'some_url',
data: { is_ajax: true }
}).done(function(response){
$('span#imgLoader').empty();
});
}
Initialize slider,
$elt.slider({
min:0,
max:100,
value:50,
slide: slide_range,
stop: slide_stop
}).each(function(){
add_range_label($range_elt);
});
All ajax requests get stopped/in not modified state. But last request takes too long time to complete. No result again same hanging state.
2:
var request = $.ajax(
{
type: 'POST',
url: 'someurl',
success: function(result){}
});
then,
request.abort();
Not working. Too many requests are still in pending state.
I don't know what is wrong with it.
I tried using 'jquery-throttle-debounce'. Included file 'jquery.ba-throttle-debounce.min.js'
Applied jQuery.debounce to stop event for slider.
$("#slider").on( "slidestop", $.debounce( 240, slide_stop ) );
I tried by reducing time delay. But no expected result. Same case as above.

You can use a plugin such as http://archive.plugins.jquery.com/project/AjaxManager.
Also, as Javis mentioned you are best off to also incorporate a delay before sending the response so that you don't needlessly overload your server with requests. Instead of using time differences or arrays I would just keep a reference to the last ajax request created. You would abort that request each time a new one is made.
// just putting these here for example, you would want to associate them with each instance of your slider control.
var timeout, last_request;
function slide_stop(event, ui){
$('span#imgLoader').html('<img src="/assets/ajax-loader.gif">');
// clear the timeout so a previous request won't be sent
clearTimeout(timeout)
// set the request to be sent in .5 seconds
timeout = setTimeout(send_request, 500);
}
function send_request(){
// abort the last request if there is one
if(last_request){
last_request.abort();
}
last_request = $.ajax({
type: 'get',
dataType: 'json',
url: 'some_url',
data: { is_ajax: true }
}).done(function(response){
$('span#imgLoader').empty();
// set the last request to null so that you dont abort a completed request
//(this might not be necessary)
last_request = null;
});
}

Try to throttle those requests, so many request to server can cause a performance issue on your server side, because remember that each ajax call is an apache (or whatever your webserver is) request, which costs memory and cpu. And remember that excesive requests can cause a DDoS.
Remember that as an user, i can start playing with the slider so much as i like, causing a ton of requests.
You should add something like:
var requests = [];
var lastCall = (+new Date()); // parenthesis just in case of minify
var timeDiff = 1000;
function sliderStopCallback() { // this will be called each time the slider stop sliding
if(timeDiff < 400) {
return;
}
abortAll();
requests.push( $.ajax({
type: 'POST',
url: 'someurl',
success: function(result){}
}) );
}
function sliderStartCallback() { // this will be call each time the user start to slide
timeDiff = (+new Date()) - lastCall;
lastCall = (+new Date());
}
function abortAll() {
var l = requests.length;
while(l--) {
requests[l].abort && requests[l].abort(); // the if is for the first case mostly, where array is still empty, so no abort method exists.
}
}
That way, each request will be sent at least on 400 milliseconds, preventing calls every 2 seconds.
This should work, but please notice that i havent tested it, so if you're going to try it please remember that it is a general idea, not a precise solution.
Good luck.

As said in comments, it's best to not send the request until the slideStop event. This way requests are not sent every time the value is changed, and thus server load is much less of an issue.
function ajaxrequest(){
$.ajax(....);
}
$("#slider").on("slideStop", function() {
ajaxrequest();
});

Javascript Module Pattern and jquery Ajax wait issue

I have written a custom js module that basically sends messages and needs to wait for a response in order to continue:
var manageBooking = (function (jQ) {
//decalre private variables
var domain, msgRecieved, msgResponse, validationValue;
//decalre private functions
var sendMessage, wait;
// A private variables
domain = document.domain;
msgRecieved = false;
msgResponse = null;
wait = function(timeOutStep){
var w;
console.log('msgRecieved', msgRecieved);
if (msgRecieved === true) {
clearTimeout(w);
return;
} else {
console.log('waiting..');
w = setTimeout(wait, timeOutStep, timeOutStep);
}
}
// A private function to send messages
sendMessage = function( requestURL, data, type ) {
console.log(requestURL);
console.log(data);
console.log(type);
//reset vars to defaults
msgRecieved = false;
msgResponse = null;
jQuery.ajax({
url: "http://"+domain+"/_ajax/"+requestURL,
dataType: "html",
async: true,
data: data,
type: type,
success: function(msg){
console.log(msg);
msgResponse = msg;
msgRecieved = true;
}
});
console.log('after ajax call');
wait(500);
console.log('after wait');
console.log('msgRecieved', msgRecieved);
return;
};
return {
// A public variable
errorMsg: "",
validationName: "",
bookingID: "",
output: "",
// A public function to login
login: function( enteredBookingID, enteredSurname ) {
// Call private sendMsg
sendMessage("user_login/"+enteredBookingID+"/"+enteredSurname, null, 'GET');
console.log(msgResponse);
throw "error";
//check response
var patt=/Sorry/i;
//test pattern
var result=patt.test($.trim(msgResponse));
//if false OK
if (result === false) {
var split = msgResponse.split('|');
validationName = split[0];
validationValue = split[1];
bookingID = enteredBookingID
return true;
}
//else error
errorMsg = msgResponse;
return false;
}
};
})(jQuery);
manageBooking.login(123,123);
The issue i am having is forcing the sendMessage function to wait until the ajax completes and sets msgRecieved to true.
However it appears that the sendMessage function hits the wait function once and then continues.
the following console output shows the order of events:
GET http://website/_ajax/user_login/123/123
after ajax call //sendMessage()
msgRecieved, false //wait()
waiting.. //wait()
after wait //sendMessage()
msgRecieved, false //sendMessage()
null//login()
uncaught exception: error //login()
<p>Sorry, we cannot locate your details. </p> <!-- jQuery Ajax call -->
msgRecieved, true //wait()
What I am confused with is that the wait function seems to fire again right at the end..
can anyone give me some pointers on getting this to work?

JavaScript behaves in an asynchronous manner, meaning it does not wait.
You have a part in your code that looks like this:
jQuery.ajax({
url: "http://"+domain+"/_ajax/"+requestURL,
dataType: "html",
async: true,
data: data,
type: type,
success: function(msg){
console.log(msg);
msgResponse = msg;
msgRecieved = true;
}
});
You should place the code to be run when the response arrives within the success function, like so:
success : function (msg) {
handleMessage(msg); // Or any other manipulation to the received message
}
function handleMessage(msg) {
// Work with your received message here.
}
success will be called with the received message, it is a callback.
The right way to implement sendMessage would be the following way:
sendMessage = function( requestURL, data, type, callback ) {
console.log(requestURL);
console.log(data);
console.log(type);
//reset vars to defaults
msgRecieved = false;
msgResponse = null;
jQuery.ajax({
url: "http://"+domain+"/_ajax/"+requestURL,
dataType: "html",
async: true,
data: data,
type: type,
success: function(msg){
console.log(msg);
msgResponse = msg;
msgRecieved = true;
// Call the callback function to notify the message
// was received
callback();
}
});
};
and then using it like so:
sendMessage(urlHere, dataHere, typeHere, function () {
// Message has been received, msgResponse and msgReceived
// have already been updated. Do what you need here
});

the problem may be related to the scope of your w variable, because on second call (in the wait function, into your else branch) you're destroying the reference to the timeout you previously created, so the clearTimeout can't work: try to define it in the immediate outer scope.

You should try using the JavaScript setInterval function instead of setTimeout. But this time, break up sendMessage, and place the part that needs to execute after the ajax message is received under a setInterval.
Once the ajax message is received this second part of sendMessage runs (after messagereceived is true), and also clears the interval.
This is since setTimeout() only executes once after a set interval.
setInterval() executes repeatedly exery interval until it is cleared.
More information can be found Here
Hope this helps!

Accessing outer scope

I'm working on creating a Users collection with the ability to then grab single users inside. This will be used to match from another system, so my desire is to load the users once, and then be able to fine/match later. However, I'm having a problem accessing the outer users collection from an inner method.
function Users(){
var allUsers;
this.getUsers = function () {
// ajax to that Jasmine behaves
$.ajax({
url: '../app/data/jira_users.json',
async: false,
dataType: 'json',
success: function(data) {
allUsers = data;
}
});
return allUsers;
};
this.SingleUser = function (name) {
var rate = 0.0;
var position;
this.getRate = function () {
if(position === undefined){
console.log('>>info: getting user position to then find rate');
this.getPosition();
}
$.ajax({
url: '../app/data/rates.json',
async: false,
dataType: 'json',
success: function(data) {
rate = data[position];
}
});
return rate;
};
this.getPosition = function () {
console.log(allUsers);
//position = allUsers[name];
return position;
};
//set name prop for use later I guess.
this.name = name;
};
}
and the test that's starting all of this:
it("get single user's position", function(){
var users = new Users();
var someone = new users.SingleUser('bgrimes');
var position = someone.getPosition();
expect(position).not.toBeUndefined();
expect(position).toEqual('mgr');
});
The getPosition method is the issue (which might be obvious) as allUsers is always undefined. What I have here is yet another attempt, I've tried a few ways. I think the problem is how the Users.getUsers is being called to start with, but I'm also unsure if I'm using the outer and inner vars is correct.

Though the others are correct in that this won't work as you have it typed out, I see the use case is a jasmine test case. So, there is a way to make your test succeed. And by doing something like the following you remove the need to actually be running any kind of server to do your test.
var dataThatYouWouldExpectFromServer = {
bgrimes: {
username: 'bgrimes',
show: 'chuck',
position: 'mgr'
}
};
it("get single user's position", function(){
var users = new Users();
spyOn($, 'ajax').andCallFake(function (ajaxOptions) {
ajaxOptions.success(dataThatYouWouldExpectFromServer);
});
users.getUsers();
var someone = new users.SingleUser('bgrimes');
var position = someone.getPosition();
expect(position).not.toBeUndefined();
expect(position).toEqual('mgr');
});
This will make the ajax call return whatever it is that you want it to return, which also allows you to mock out tests for failures, unexpected data, etc. You can set 'dataThatYouWouldExpectFromServer' to anything you want at any time.. which can help with cases where you want to test out a few different results but don't want a JSON file for each result.
Sorta-edit - this would fix the test case, but probably not the code. My recommendation is that any time you rely on an ajax call return, make sure the method you are calling has a 'callback' argument. For example:
var users = new Users();
users.getUsers(function () {
//continue doing stuff
});
You can nest them, or you can (preferably) create the callbacks and then use them as arguments for eachother.
var users = new Users(), currentUser;
var showUserRate = function () {
//show his rate
//this won't require a callback because we know it's loaded.
var rate = currentUser.getRate();
}
var usersLoaded = function () {
//going to load up the user 'bgrimes'
currentUser = new users.SingleUser('bgrimes');
currentUser.getRate(showUserRate);
}
users.getUsers(usersLoaded);

your approach to fill the data in allUsers is flawed
the ajax call in jquery is async so every call to users.getAllUsers would be returned with nothing and when later the success function of the jquery ajax is called then allUsers would get filled

this.getUsers() won't work. Its returning of allUsers is independent from the ajax request that fetches the data, because, well, the ajax is asynchronous. Same with getRate().
You'll have to use a callback approach, where you call getUsers() with a callback reference, and when the ajax request completes, it passes the data to the callback function.
Something like:
this.getUsers = function (callback) {
// ajax to that Jasmine behaves
$.ajax({
url: '../app/data/jira_users.json',
async: false,
dataType: 'json',
success: function(data) {
callback(data);
}
});
};
And the call would be along the lines of:
var user_data = null;
Users.getUsers(function(data) {
user_data = data;
});