Faux Timeout Triggers with JavaScript/jQuery & AJAX - javascript

Within jQuery.ajax we have the blessing of setting a timeout in milliseconds and an Error callback to process that timeout.
However, the some people are simply on slow connection, with small amounts of patience. What I want to do is simply display a message stating "This is taking longer than usual".
The Timeout arguement in jQuery won't satisfy this, and setTimeout() does exactly the same thing. How could this be achieved with a simple time check?

OK, this was simple enough.
All I needed to do was actually set up an independent Timout, with a function inside to display whatever message I needed to.
You can still keep in the Timeout/Error Callback for really long extended periods, too.
var timeout = true;
timeout = setTimeout(function() {
if (timeout) {
$("#zendesk-dropbox-error").html("Contacting the Helpdesk is taking longer than usual, try submitting manually?");
}
}, 9000);
// Call for a JSON return from the PHP script
$.ajax({ type: 'GET', url: http://www.example.com, dataType: 'json', cache: false, data: ({ a: 'b' }), timeout: 60000,
success: function(zendesk){
timeout = false;
// Code
},error: function(objAJAXRequest, strError) {
// Code
}
});

Related

Cordova iOS AJAX GET request ignoring timeout, ends after 10 seconds

Using Cordova 8.0.0, iOS 12.1.2, trying to make a GET request to my server.
I can make requests successfully to the server, but if for whatever reason it takes longer than 10 seconds then it fails. It DOES work if it takes any amount of time less than that.
This only occurs for me in iOS, the Android build of the app does not show this behaviour and respects the timeout I've set below.
Example snippet:
$.ajax({
type: "GET",
url: actionUrl,
data: data,
cache: false,
dataType: "xml",
timeout: 300000,
async: false,
beforeSend: function (request) {
request.setRequestHeader("user", settings.userId);
request.setRequestHeader("sid", settings.sessionKey);
},
success: function (results) {
callback(results);
},
error: function (e) {
if (!surpressError){
main.ajaxError(e);
}
main.stopLoading();
if (errorCallback){
errorCallback(e);
}
}
});
Screenshot of request timing
If I make async: true or just take that bit out, the request CAN take longer than 10 seconds to complete but with this legacy app I'd rather not have to change more of it around than I have to to accommodate the switch.
I've also tried adding <preference name="loadUrlTimeoutValue" value="300000" /> to my config.xml, and timeouts of less than 1 minute (30000) but that does not help.
Is there another way I can ensure the timeout is longer than 10 seconds that I have missed?
I managed to work around the issue by removing async: false (thanks charlietfl) and doing:
$.ajax({
//as above
}).done(function(res) {
callback(res);
});
This allowed the request to continue, and upon testing with other timeouts now appears to respect that as well. I also needed to move some displaying code on the receiving end of this request to inside the callback.
Ref: jQuery.ajax() method's async option deprecated, what now?

Timeout in function with ajax jquery

Good afternoon people !
I have the following code in jquery / ajax
$.ajax({
url:'../pujar',
dataType:'json',
type:'get',
cache:true,
});
This code works correctly when I send the php but now I don't know how to use the timeout with ajax.
In another code I use the following structure and I don't have any problem with code.
setInterval(function() {
$.ajax({
url: '../ajaxpujas',
dataType: 'json',
type: 'get',
cache: true,
success: json,
});
function json(data) {
$("#tbodyid")
.empty();
$(data)
.each(function(index, value) {
var table = '<tr><td>' + value.users.name + '</td><td>' + value.id + '</td></tr>';
$('#tbodyid')
.append(table);
});
}
}, 1000);
When I try to use this code , doesn't work correctly. I need to reload every second.
$.ajax({
url:'../pujar',
dataType:'json',
type:'get',
cache:true,
timeout:1000,
});
Docs
Set a timeout (in milliseconds) for the request. This will override any global timeout set with $.ajaxSetup(). The timeout period starts at the point the $.ajax call is made; if several other requests are in progress and the browser has no connections available, it is possible for a request to time out before it can be sent. In jQuery 1.4.x and below, the XMLHttpRequest object will be in an invalid state if the request times out; accessing any object members may throw an exception. In Firefox 3.0+ only, script and JSONP requests cannot be cancelled by a timeout; the script will run even if it arrives after the timeout period.
timeout in $.ajax() sSet a timeout (in milliseconds) for the request to complete, if for any reason the request is not completed with in the time frame the request will abort
You have to use
setInterval(function() {
$.ajax({
url: '../pujar',
dataType: 'json',
type: 'get',
cache: true,
success: function (data) {
}
});
}, 1000);
The "timeout" that you are using in the AJAX request is not the same as setTimeout in javascript. AJAX timeout actually specifies the time in which the request should get timed out.
As per jquery's documentation
timeout
Type: Number
Set a timeout (in milliseconds) for the request. This will override any global timeout set with $.ajaxSetup(). The timeout period starts at the point the $.ajax call is made; if several other requests are in progress and the browser has no connections available, it is possible for a request to time out before it can be sent.
Hence you are actually setting a timeout for your request (i.e. if the source doesn't respond in 1000ms consider it to be a timeout failure). Thus you have to reload it every second.
What you are trying to do with the setInterval would work. Though I would recommend using setTimeout recursively instead of setInterval for better performance (and the intended effect I guess).

Which of the following javascripts long polling code should I use?

I wanted to use long polling.
I google it and found many helpful resources, and since many, I am getting confuse which is better.
Following are three code snippets from two place.
https://gist.github.com/jasdeepkhalsa/4353139
// Long Polling (Recommened Technique - Creates An Open Connection To Server ∴ Fast)
(function poll(){
$.ajax({
url: "server",
success: function(data)
{
//Update your dashboard gauge
salesGauge.setValue(data.value);
},
dataType: "json",
complete: poll,
timeout: 30000
});
})();
// The setTimeout Technique (Not Recommended - No Queues But New AJAX Request Each Time ∴ Slow)
(function poll(){
setTimeout(function(){
$.ajax({
url: "server",
success: function(data)
{
//Update your dashboard gauge
salesGauge.setValue(data.value);
//Setup the next poll recursively
poll();
},
dataType: "json"});
}, 30000);
})();
https://github.com/panique/php-long-polling/blob/master/client/client.js
function getContent(timestamp)
{
var queryString = {'timestamp' : timestamp};
$.ajax(
{
type: 'GET',
url: 'http://127.0.0.1/php-long-polling/server/server.php',
data: queryString,
success: function(data){
// put result data into "obj"
var obj = jQuery.parseJSON(data);
// put the data_from_file into #response
$('#response').html(obj.data_from_file);
// call the function again, this time with the timestamp we just got from server.php
getContent(obj.timestamp);
}
}
);
}
My question is which code is long polling best practice?
Which one should I use?
Thanks in advance.
The first approach is better on my opinion:
If server configured for long polling with timeout more than 30000, then with first one you will have breaking request by timeout and a new request will be sent, success() function would not be called
(while complete() will be, also error could be handled in error() like this
error: function(x, t, m) {
if(t==="timeout") {
alert("got timeout");
} else {
alert(t);
}
}
).
While in the second one a new request would be sent after 30000 and so you would have unpredictable behavior on a client side (two requests can receive the same answer, so data could be duplicated).
If server configured for long polling with less than 30000, then in second approach data on a client side would not be updated in time.
If server configured for long polling with 30000, then it should not be any difference.
To summarize: in first approach situation is controllable, while in second one - not always.

More efficient way to refresh div with ajax data

I have built an ajax chat app, but now when it refreshes the chats (loading all the new chats) it seems to pause between removing all the current chats and loading all the chats including the new one. This is set on a timer, so whenever it runs, it sort of has this gap of blankness and then jumps to the top of the page (the top of the div getting refreshed) What do I need to do to ensure that this doesn't happen? ie: how do I take the waiting period out / do it different?
$(document).ready(function() {
window.setInterval(function(){
$('#chat-messages').empty();
getMessages(meid, friendid);
}, 5000);
});
$.ajax({
url: 'getAllMessages.php',
data: 'id='+id+'&&friend='+friendid,
type: 'POST',
success: function(res) {
// processing code goes in here, it was too long so I took it out.
}
});
$.ajax({
url: 'getAllMessages.php',
data: 'id='+id+'&&friend='+friendid,
type: 'POST',
success: function(res) {
$('#chat-messages').empty();
// empty on success to avoid delay caused due to ajax request
}
});
Decrease Interval time
Add new content instead of removing old content and adding new content.
Use setTimeout call and add it to success block
I think the best thing you can do is add a new parameter named "last-update" and get only the new messages from the last success query...
Than, you just need to do something like
$('#chat-messages').append(new_messages)
You will optimize chat refresh, network latency and mysql :-)

How can I avoid overloading the JavaScript CallStack?

The javascript below accomplishes the following (this is for a node.js COMET application):
Request is made to the server and held until the server has something to
return.
Once the request returns the data is processed and another
request is immediately made within the callback function of the
success event.
If a timeout occurs (the server had nothing to return within the time frame)
another request is made within the callback function of the error event.
My concern (which I believe is valid) is that the requests are continually added to the callstack, much like a recursive function that never ends. After a while, it results in the browser eventually crashing and becoming unresponsive (at least I think this is the cause).
How can I accomplish the same thing and avoid this problem?
function GetData(){
$.ajax({
url: "admin.html",
type: "POST",
dataType: "json",
contentType: 'text/json',
data: JSON.stringify({
cmd: "getData"
}),
timeout: (60 * 1000),
success: function(data, textStatus, jqXHR){
UpdateScreen(data);
GetData();
},
error: function(jqXHR, textStatus, errorThrown){
if(textStatus == "timeout"){
GetData();
}
}
});
}
No, I'm pretty sure you are OK. The ajax event is asynchronous, so the GetData function will finish and the browser will wait for events, before it calls GetData again from the success handler.
Think of it as the GetData function just defining what to do, not actually doing it. Then it finishes executing (and clears the stack) and browser does those actions.
function GetData(limit){
limit = limit || 0;
$.ajax({
url: "admin.html",
type: "POST",
dataType: "json",
contentType: 'text/json',
data: JSON.stringify({
cmd: "getData"
}),
timeout: (60 * 1000),
success: function(data, textStatus, jqXHR){
UpdateScreen(data);
GetData();
},
error: function(jqXHR, textStatus, errorThrown){
if(textStatus === "timeout" && limit < 20){
GetData(++limit);
} else {
//throw "epic fail"
setTimeout(GetData, 0);
}
}
});
}
Just add a little timeout limit counter. if it gets too big either give up and throw an error or break the call stack by calling setTimeout which is asynchronous.
I'm wondering if your UpdateScreen(data) method is the problem. Is that a recursive function as well? People suggesting that you simply timeout the method doesn't actually fix the problem, it simply aborts the process. I would try logging something like console.log("get data success") and console.log("get data error") in your success and error callbacks respectively. If your log page is full of one message, you know where the GetData() method is continually called. It could be always timing out.
On a side note, you should change your if statement for an error to something like
if(jqxhr.responseText == "timeout"){
getData();
}
see here for explanation why: jQuery Ajax error handling, show custom exception messages

Categories