Develop Reference

Javascript, make ajax call after 3 seconds

I have a working javascript block that basically takes user input, and upon each keystroke makes an Ajax POST call.
This works perfectly but I'd like to change it to only fire the ajax 3 seconds after the user starts typing, as opposed to every keystroke. Ideally I'd like to fire it after 3 seconds and if they start typing again it would start over, but the initial delay is most important.
I tried to do a set interval around it but it's didn't make the ajax call, so I'm wondering if there's different approach I need to take.
how can I make this ajax only call 3 seconds after typing in the input starts?
$('#productInput').on('input', function() {
let _this = $(this);
let optSelector = `option[value='${_this.val()}']`;
if (_this.val() === '') {
return;
} else if ($('#returnedProducts').find(optSelector).length) {
//html stuff
} else {
const searchResult = $(this).val();
$.ajax({ url: '/account/autocomplete',
data: {
search_result:searchResult
},
"_token": "{{ csrf_token() }}",
type: "POST",
success: function (response) {
$("#returnedProducts").empty();
var result = response.hits.hits;
for (let i = 0; i < result.length; i++) {
$("#returnedProducts").append($("<option/>",
{
//option stuff
}
));
}
}
});
}
});

Have a persistent variable that holds a setTimeout. On input, clear the current timeout (if there is one), and set another timeout to trigger in 3 seconds (unless another input event occurs). You may also consider putting the ajax call (at least) into its own function, for the sake of less indentation hell:
let timeout;
$('input').on('input', () => {
clearTimeout(timeout);
console.log('timeout set');
timeout = setTimeout(() => console.log('action running'), 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>
let timeout;
$('#productInput').on('input', function() {
clearTimeout(timeout);
let _this = $(this);
let optSelector = `option[value='${_this.val()}']`;
if (_this.val() === '') {
return;
} else if ($('#returnedProducts').find(optSelector).length) {
//html stuff
} else {
const searchResult = $(this).val();
timeout = setTimeout(ajaxCall, 3000, searchResult);
}
});
function ajaxCall(search_result) {
$.ajax({
url: '/account/autocomplete',
data: { search_result },
"_token": "{{ csrf_token() }}",
type: "POST",
success: successHandler
});
}
function successHandler(response) {
$("#returnedProducts").empty();
var result = response.hits.hits;
for (let i = 0; i < result.length; i++) {
$("#returnedProducts").append($("<option/>", {
//option stuff
}));
}
}

Why doesn't the setInterval function stop?

I'm trying to clear the time interval which runs every 15 seconds.
Here is the ajax request:
function extras()
{
$x = {
action:'extras'
};
var r;
$.ajax({
type:'POST',
url:'services.php',
data:$x,
beforeSend:function() {
$('input[name="stop_"]').trigger("click");
},
success:function(response) {
r = response;
//console.log(response)
},
complete:function() {
console.log(r);
$('input[name="re_start"]').trigger("click");
}
});
}
So, in my buttons re_start and stop_ i have:
$('input[name="re_start"]').click(function (event) {
event.preventDefault();
clearInterval(check);
var check = setInterval(function() {
extras();
},15000);
console.log('Starting again...');
});
$('input[name="stop_"]').click(function (event) {
event.preventDefault();
clearInterval(check);
console.log('Stop');
});
In my DOM in jQuery I initialize the function extras() and keep it in a variable called "check" where I initialize the time interval as follows:
<input type="button" style="display:none;" name="re_start">
<input type="button" style="display:none;" name="stop_">
<script type="text/javascript">
(function() {
extras();
var check = setInterval(function() {
extras();
},15000);
})();
function extras()
{
$x = {
action:'extras'
};
var r;
$.ajax({
type:'POST',
url:'services.php',
data:$x,
beforeSend:function() {
$('input[name="stop_"]').trigger("click");
},
success:function(response) {
r = response;
//console.log(response)
},
complete:function() {
console.log(r);
//message_smart(r);
$('input[name="re_start"]').trigger("click");
}
});
}
</script>
Then I can not understand how it is possible that the first 30 seconds work and when they pass 60 seconds seem to start doing things twice at once, then three and so on! It seems like if I change the interval every second and will run faster and faster. What is the problem?

The problem is here:
(function() {
extras();
var check = setInterval(function() {
extras();
},15000);
})();
You are creating a variable check in a new function scope that is inaccessible outside of that scope. Microsoft has a good example of scope in javascript. Additionally you can see this question.
Now to solve your problem you need to put the check variable in the global scope so remove the function wrapper.
extras();
var check = setInterval(function() {
extras();
},15000);
You also need to change the restart handler to reassign the variable, like so:
$('input[name="re_start"]').click(function (event) {
event.preventDefault();
clearInterval(check);
check = setInterval(function() {
extras();
},15000);
console.log('Starting again...');
});
Now they should all be using the same check variable and work as expected when clearing the timeout.

stop the setInterval if the content returned is not empty

So I am retrieving some data via POST using ajax, every 5 seconds, what I am trying to achieve is if the php file ouputs something, then stop the setInterval somehow or set it to 9999999.
Here is what I've tried:
var interval = DEFINEDFROMMYQL;
$(function() {
setInterval(function() {
$.ajax({
type: "POST",
url: "url/file.php",
data: "whatever=2",
success: function(html) {
$("#new").html(html);
if(html.lenght > 0) {
var interval = 99999999999999;
}
}
});
}, interval);
});
I'm a newbie, so any help will be appreciated.

You can use clearInterval() to stop the timer started by setInterval and correct the typo html.lenght to html.length
// var interval = DEFINEDFROMMYQL;
$(function() {
yourInterval = setInterval(function() {
$.ajax({
type: "POST",
url: "url/file.php",
data: "whatever=2",
success: function(html) {
$("#new").html(html);
if(html.length > 0) {
///var interval = 99999999999999;
clearInterval(yourInterval);
}
}
});
}, interval);
});

You can handle this a couple of different ways, but based on your question ("stop the setinterval somehow") let's switch the implementation to a setTimeout and also refactor the code in to a function we can recall. So...
var interval = DEFINEDFROMMYQL;
$(function() {
// establish a function we can recall
function getDataFromServer(){
// this encapsulates the original code in a function we can re-call
// in a setTimeout later on (when applicable)
$.ajax({
type: "POST",
url: "url/file.php",
data: "whatever=2",
success: function(html) {
$("#new").html(html);
// only if the length is 0 do we re-queue the function
// otherwise (becase it's setTimeout) it will just die
// off and stop.
if(html.lenght == 0) {
setTimeout(getDataFromServer, interval);
}
}
});
}
// make an initial call to the function to get the ball rolling
setTimeout(getDataFromServer, interval);
// if you want it to execute immediately instead of wait out the interval,
// replace the above line to simply:
//getDataFromServer();
});

Resetting setInterval on button click

Updated with latest code:
Here is the latest code, still has 2 buttons and 2 functions. Each button should run the relievant function and set the code to run the same button after every minute via the setInterval. For some reason, the very first setInterval always seems to stay set, even after clicking the second button which should change it. Not sure what I'm doing wrong:
$(document).ready(function() {
var myTimer = null;
get_popular();
clearInterval(myTimer);
myTimer = null;
myTimer = setInterval(function() {$('a.btnPopular').click();}, 60*1000);
$('a.btnPopular').click( function(event) {
event.preventDefault();
get_popular( $(this) );
clearInterval(myTimer);
myTimer = null;
myTimer = setInterval(function() {$('a.btnPopular').click();}, 60*1000);
});
function get_popular( that ) {
$.ajax({
url: 'get_popular.aspx?rand=' + Math.random(),
type: 'GET',
error: function(xhr, status, error) {
// error message here
},
success: function(results) {
if ( typeof that != "undefined" ) {
that.closest('.outer_div').find('.inner_div').empty().append( results );
} else {
$('.inner_div.new').empty().append( results ).removeClass('new');
}
}
});
}
$('a.btnLatest').click( function(event) {
event.preventDefault();
get_latest( $(this) );
clearInterval(myTimer);
myTimer = null;
myTimer = setInterval(function() {$('a.btnLatest').click();}, 60*1000);
});
function get_latest( that ) {
$.ajax({
url: 'get_latest.aspx?rand=' + Math.random(),
type: 'GET',
error: function(xhr, status, error) {
// error message here
},
success: function(results) {
if ( typeof that != "undefined" ) {
that.closest('.outer_div').find('.inner_div').empty().append( results );
} else {
$('.inner_div.new').empty().append( results ).removeClass('new');
}
}
});
}
});

Try:
setInterval(function() {$('a.btnPopular').click();}, 60*1000);
Edit:
Also you can't call get_popular(); without a parameter ;)
Edit 2:
This should solve your problems:
var myTimer = null;
$('a.btnPopular').click(function(event) {
event.preventDefault();
get_popular($(this));
clearTimeout(myTimer);
myTimer = setTimeout(function(){$('a.btnPopular').click();}, 60*1000);
});
$('a.btnLatest').click(function(event) {
event.preventDefault();
get_latest($(this));
clearTimeout(myTimer);
myTimer = setTimeout(function(){$('a.btnLatest').click();}, 60*1000);
});

setInterval(function() {$('a.btnPopular').trigger('click');}, 60*1000);
// Ad do this
$(elem).click(function(){}) => $(elem).on('click', function(){});

How can I stop this setTimeout function from running?

I use the function below to check on the status of a JSON file. It runs every 8 seconds (using setTimeout) to check if the file has changed. Once the JSON's status becomes 'success' I no longer want to keep calling the function. Can someone please show me how to do this? I suspect it involves the use of clearTimeout, but I'm unsure how to implement this.
Cheers!
$(function() {
var checkBookStatus = function() {
var job_id = "#{#job.job_id}";
var msg = $('.msg');
var msgBuilding = $('#msg-building');
var msgQueuing = $('#msg-in-queue');
var msgSuccessful = $('#msg-successful-build');
var msgError = $('#msg-error');
$.ajax({
url: '/jobs/'+job_id+'/status.json',
datatype: 'JSON',
success:function(data){
if (data.status == "failure") {
msg.hide();
msgError.show();
}
else if (data.status == "#{Job.queue}") {
msg.hide();
msgQueuing.show();
}
else if (data.status == "#{Job.building}") {
msg.hide();
msgBuilding.show();
}
else if (data.status == "#{Job.failure}") {
msg.hide();
msgError.show();
}
else if (data.status == "#{Job.success}") {
msg.hide();
msgSuccessful.show();
}
},
}).always(function () {
setTimeout(checkBookStatus, 8000);
});
};
checkBookStatus();
});

t = setTimeout(checkBookStatus, 8000); when you decide to stop the timeout use this clearTimeout(t);.

use clearTimeout
e.g. you defined :
id = setTimeout(checkBookStatus, 8000);
then you can remove this function by :
clearTimeout(id)

Before your call of checkBookStatus() at the end, put another call: var interval = setInterval(checkBookStatus, 8000);. Then on success you can clearInterval(interval).
Do not use setTimeout for iteration.
A lot of answers are suggesting just to use clearTimeout() however, you are checking the status after the timeout has expired, there is no timeout to clear. You need to not call setTimeout() in your always() function rather than to clear anything. So you could re-inspect the status inside your always() function I suppose, but your data object isn't in scope there. It would be preferable to just use setInterval() outside of your checkBookStatus() function.
$(function() {
var checkBookStatus = function() {
var job_id = "#{#job.job_id}";
var msg = $('.msg');
var msgBuilding = $('#msg-building');
var msgQueuing = $('#msg-in-queue');
var msgSuccessful = $('#msg-successful-build');
var msgError = $('#msg-error');
$.ajax({
url: '/jobs/'+job_id+'/status.json',
datatype: 'JSON',
success:function(data){
if (data.status == "failure") {
msg.hide();
msgError.show();
}
else if (data.status == "#{Job.queue}") {
msg.hide();
msgQueuing.show();
}
else if (data.status == "#{Job.building}") {
msg.hide();
msgBuilding.show();
}
else if (data.status == "#{Job.failure}") {
msg.hide();
msgError.show();
}
else if (data.status == "#{Job.success}") {
msg.hide();
msgSuccessful.show();
clearInterval(interval);
}
}
});
};
var interval = setInterval(checkBookStatus, 8000);
checkBookStatus();
});

Call clearTimeout with the value previously returned by setTimeout. This would give you something like:
$(function() {
var timeoutID;
var checkBookStatus = function () {
[…]
else if (data.status == "#{Job.success}") {
clearTimeout(timeoutID);
[…]
}).always(function () {
timeoutID = setTimeout(checkBookStatus, 8000);
[…]

When you use setTimeout, use like this:
var myTime = setTimeout(checkBookStatus, 8000);
to clear it just:
clearTimeout(myTime);

the following should work...
the setTimeout function return an instance of the setTimeout function. Keep this value in a variable and pass it to the function clearTimeout when you want to prevent the event from firing again.
i.e.
var t = setTimeout(1000, someFunction);
...
//after you no longer need the timeout to fire, call
clearTimeout(t);