Jquery/Ajax call with timer - javascript

I have a php page that echos out rows from a database. I want to call it via jquery/ajax every 30 seconds. But I also want to be able to call the page at any time so that if I add a record via the form, once the form submits I want the page via called to ajax to update the results right away. Can anyone point me in the right direction or provide some base code so I can try to figure this out? Still very new to jquery/ajax.

If you want to set something on a timer, you can use JavaScript's setTimeout or setInterval methods:
setTimeout ( expression, timeout );
setInterval ( expression, interval );
Where expression is a function and timeout and interval are integers in milliseconds. setTimeout runs the timer once and runs the expression once whereas setInterval will run the expression every time the interval passes.
So in your case it would work something like this:
setInterval(function() {
//call $.ajax here
}, 5000); //5 seconds
As far as the Ajax goes, see jQuery's ajax() method. If you run an interval, there is nothing stopping you from calling the same ajax() from other places in your code.
If what you want is for an interval to run every 30 seconds until a user initiates a form submission...and then create a new interval after that, that is also possible:
setInterval() returns an integer which is the ID of the interval.
var id = setInterval(function() {
//call $.ajax here
}, 30000); // 30 seconds
If you store that ID in a variable, you can then call clearInterval(id) which will stop the progression.
Then you can reinstantiate the setInterval() call after you've completed your ajax form submission.

Related

How to make a js function run immediately and then on a 10sec interval?

It only runs after 10 seconds. I want it to run when the page loads and then on a 10 seconds interval. Hope someone can help me.
function getPrice(){
$("#ajax").load('somefile.php?sym=<?php echo $yahoosymbol;?> #ajax');
}
getPrice();
setTimeout(getPrice, 10000);
UPDATE:
I got it to work after putting the function into a <body onload="function()">
none of the other things worked.. I still wonder why?
Try this :
function getPrice(){
$("#ajax").load('your code...');
}
getPrice(); //for initial execution
setInterval(getPrice, 10000); //runs the function on 10sec. interval
The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds
whereas setInterval() method does the same thing but at specified intervals repeatedly

clearTimeout on a function that has a paramenter

I am writing a chat application that can have many chat windows open at once. Every time a window is opened I call a setInterval on my function, update_chat(), that updates an individual chat window. I pass the chat_id to update_chat()
setInterval("update_chat("+chat_id+")",4000);
chat_id is just the id of the chat. So I can have the function update_chat running multiple times on different intervals depending on how many chats are open. Start the chat works fine.
My main question is how can I stop the interval above. I don't want to stop all intervals, just the one associated with a particular chat. I tried this
clearInterval("update_chat("+chat_id+")");
but it didn't do anything.
I tried
var chat_intervals=[]
chat_intervals[chat_id]=setInterval("update_chat("+chat_id+")",4000);
clearInterval(chat_intervals[end_id]);
It didn't stop the interval
clearInterval(docs) takes an interval ID as a parameter to know which interval to clear. setInterval (docs) returns an interval ID when called, so you store that in a var and pass it to clearInterval when you want that one to clear.
//start the interval, store its ID
var interval_id = setInterval( function () { /* do something*/ }, 1000);
//clear the interval
clearInterval(interval_id);
Note that setTimeout (docs) and clearTimeout (docs) work with each other in the same way.
Also note that while setInterval can take a string argument as the function to run, it can also take actual functions (which is highly preferred). So your code could be better written as:
var update_chat_interval = setInterval(function () {
update_chat(chat_id);
}, 4000);
// to clear it later:
clearInterval(update_chat_interval);

how to call javascript function using time period ?

<script>
var refresh;
function refresh(timeoutPeriod){
refresh = setTimeout(function(){window.location.reload(true);},timeoutPeriod);
}
makeClientRequest('live','liveFeed','');
window.onload=refresh(5000);
<script>
I want to call this function every 5 sec. I try that way.but it didn't work.
Try setInterval instead of setTimeout
refresh = setInterval(function(){window.location.reload(true);},timeoutPeriod);
setTimeout will call the function only once after the specified time period. But setInterval will call the function on specified interval of time

How to call an AJAX function after every 15 seconds?

I have called a JavaScript function on<body onload>event where there is a while loop which will iterate unless and until the desired response is fetched from a PHP page.
However since the loop will make a very frequent set of requests, that is causing my browser to hang.
Is there another easy way where we can perform AJAX function request evry 15 minutes without causing much load on the browser?
use setInterval that calls your function every 15 min. something like this:
setInterval(function(){
// Call to your function that performs an ajax call...
}, 15 * 60 * 1000);
Here is link to setInterval documentation:
http://www.w3schools.com/jsref/met_win_setinterval.asp
You could use a jquery plugin for polling.
https://launchpad.net/jquery.poll
var ajax_call = function () {
$.ajax(options);
};
setInterval(ajax_call, interval);
to clear it use
clearInterval(ajax_call);
Weel i think you can use setTimeout() like this
setTimeout(yourajaxfunction,90000);
// 900000 is the delay in millisecond, after that your function is called.
inside your loop so that the function is executed only when the timeout ends.
P.S.
i think ajax was born to be "responsive", you should refresh things responding to an action of the user and not with a timeout in my opinion! :)

Is it OK to call clearInterval inside a setInterval handler?

I have a piece of Javascript that checks for a condition (via an AJAX call) every n seconds. If that condition is true, it stops checking. I have implemented it in the following way:
var stopTimer;
var timerId = setInterval(function() {
/* Make Ajax Calls and set stopTimer */
if (stopTimer) {
clearInterval(timerId);
}
}, 10000);
However, I find erratic behaviour: Works sometimes, but at other times, it keeps checking forever. I have checked that (as much as is possible) there is no error in any part of the code.
I am therefore suspecting that calling clearInterval inside a setInterval handler might be the culprit. Is that right? Is it OK to call clearInterval inside a setInterval handler?
Thank you for your attention
It's safe. The issue is probably to do with stopTimer not being set as you expect.
I don't think there will be any issue with your code unless the AJAX function is erroneous. You have to take care of the success and error callbacks of the AJAX function so that there won't be any issue with the loop not being stopped.
Also I think you are constantly polling the server for a response and then doing the appropriate action. You can use Reverse AJAX to do this kind of process.
Make sure you're not inadvertently re-using the same timer name elsewhere in your code which would result in you always stopping the second timer to be defined.
Either give the timer a unique name, or scope it to a function
var timerForAjax = setInterval(function() {
/* Make Ajax Calls and set stopTimer */
if (stopTimer)
{
clearInterval(timerForAjax);
}
}, 10000);
I was careless enough to call my timer interval and didn't realize I was creating two timers in the same scope both called interval. Blamed iOS8 for about an hour until I realized that that was nothing to do with it.

Categories