Develop Reference

JS setInterval() or setTimeout() sending too much response [duplicate]

This question already has answers here:
jQuery - Call ajax every 10 seconds
(4 answers)
Closed 6 months ago.
I'm a newby in web development. Sorry about basic questions.
I have a code block with ajax. It takes data from api, and it has to apply every 10 seconds db updates to page. But it's didn't worked. Why my setTimeout() or setInterval() code getting too much response? I tried both of them.
$(document).ready(function() {
sendRequest();
function sendRequest() {
$.ajax({
url: "http://127.0.0.1:8000/studentsapi",
dataType: "json",
success: function(data) {
$('#first_name').text(data[0].first_name);
$('#last_name').text(data[0].last_name);
$('#age').text(data[0].age);
$('#gender').text(data[0].gender);
},
complete: function(data) {
setTimeout(sendRequest, 10000); //
}
});
}
});
In terminal:

As I understand the response time of your API is fast and you just need to clear the timeout. For example:
const timeout = null;
// Your request code
complete: {
if (!timeout) {
timeout = setTimeout(sendRequest, 10000)
return
}
clearTimeout(timeout)
}
Also try to make a research on debounce and throttling it can help you achieve that easier, because you use JQuery as I see.
Also you can just use setInterval outside the complete property.
setInterval(request, 10000)
No need to do it inside complete property unless it is a requirement

How to specify an asynchronous request in API JavaScript [duplicate]

This question already has answers here:
How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?
(14 answers)
Closed 6 years ago.
I want to send to server (php) a request AJAX from an api javascript:
JS File :
var commit = new Object();
commit.id= this.id;
commit.action = this.doCommit;
commit.vrp= this.vrp;
$.post(this.ajaxURL, commit);
with this code i can send a request but in mode asynchroun. I searched on internet and I found a solution :
$.ajax({
type: 'POST',
url: this.ajaxURL,
data: commit,
async:false
});
I don't know if it is the best solution, or I can precise async:false in a $.post request, if yes , how ?.

So you do or you do not want to send the request asynchronously? The question seems to be confusing for me. But by default, $.ajax({... is always async, and $.post is just a shorthand way to write a simple post ajax request, which is also async. If you use the async:false, you are telling the javascript to not continue to execute the next line of code until the request finishes.

jQuery .ajax or .post taking too long message [duplicate]

This question already has an answer here:
Run function if jQuery.ajax waiting for respond long enough
(1 answer)
Closed 8 years ago.
I know about the timeout setting for the ajax call. But what i'm wondering is, is there a way to display a message to the user if an ajax call is still processing but taking longer than x seconds.
E.g.
During an ajax call, if it takes longer than 10 secs tell the user, "call taking longer than expected"

I'd say your best bet is to use window.setTimeout for however long you want to wait for before showing your notification, and then add a window.clearTimeout line to your success callback in your $.ajax() call:
var loadingTimeout = window.setTimeout(function() {
// show your warning here
alert('Still loading :P');
}, 10000); // 10000ms = 10sec
$.ajax({
url: 'http://your/url/here',
dataType: 'json',
type: 'GET',
success: function(r) {
window.clearTimeout(loadingTimeout);
// your results logic here
}
})

Sure, just setTimeout() yourself another function that checks some global variable that gets set by the ajax completion callback. In that function, if the ajax call is still outstanding, show a message.

Send AJAX to server beforeunload [duplicate]

This question already has answers here:
JavaScript, browsers, window close - send an AJAX request or run a script on window closing
(9 answers)
Closed 6 years ago.
So supposedly starting at Firefox > 4, binding the window jQuery object to beforeunload doesn't work anymore.
What'd I'd like to do is submit an AJAX post to delete my server's memcache data.
When I refresh the only open tab, I can see that the beforeunload event is called in both firefox and chrome with the following code as evidenced by the console.log message, "firefox/NON-firefox delete". The problem is that I never see the console.log message "memcache delete" indicating that my server never saw the $.ajax request.
I realize it is bad to do browser sniffing and that there is no difference between what's included in the if and else statements. I'm merely showing code for what I've tried unsuccessfully in Firefox.
Anyone have any ideas?
$(window).bind('beforeunload', function(){
if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) {
console.log('firefox delete');
memcacheDelete();
return null;
}
else {
console.log('NON-firefox delete');
memcacheDelete();
return null;
}
});
function memcacheDelete() {
$.ajax({
url: "/memcache/delete",
type: "post",
data:{},
success:function(){
console.log('memcache deleted');
}//success
}); //ajax
}

Ajax is asynchronous.
When you refresh (or close)your browser, beforeunload is being called. And it means as soon as beforeunload is finished executing, page will refresh (or close).
When you do an ajax request, (since its asynchronous) javascript interpreter does not wait for ajax success event to be executed and moves down finishing the execution of beforeunload.
success of ajax is supposed to be called after few secs, but you dont see it as page has been refreshed / closed.
Side note:
.success() method is deprecated and is replaced by the .done() method
Reference

Just for sake of completion, here's what I did, thanks to #Jashwant for the guidance:
I noticed that this other SO Q&A suggested the same solution.
The KEY is the async:true(false) in the $.ajax call below:
$(window).bind('beforeunload', function(){
if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) {
console.log('firefox delete');
var data={async:false};
memcacheDelete(data);
return null;
}
else {
console.log('NON-firefox delete');
var data={async:true};
memcacheDelete(data);
return null;
}
});
function memcacheDelete(data) {
$.ajax({
url: "/memcache/delete",
type: "post",
data:{},
async:data.async,
success:function(){
console.log('memcache deleted');
}//success
}); //ajax
}

Jquery On Click Function that Stops an Ajax Requests currently running [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Stop all active ajax requests in jQuery
I want to have a button that will abort any ajax requests currently being run. Below is a selector that grabs the right button. What should go in the place of the alert('test')?
$('#abort').click(function(){
alert('test')
});

You need to call abort() method - on each of the ajax calls !
var request = $.ajax({
type: 'POST',
url: 'someurl',
success: function(result){..........}
});
After that you can abort the request:
request.abort();

Create an array for each xhr object:
var xhrArray = new Array();
For every xhr object you need to add it to an array (where xhr is the object):
xhrArray.push(xhr);
Then on abort:
for( i = 0; i < xhrArray.length; i++){
xhrArray[i].abort();
stop = true;
}
The stop variable is for a loop that is elsewhere in my code to prevent more xhr objects from being created/sent.