setInterval to requestAnimationFrame - javascript

how to convert the following setInterval() to requestAnimationFrame()?
Below is a simple working setInterval model that I'm using.
$(document).ready(function() {
$("#add").click(function() {
$('#result').html(
(parseFloat($('#numA').val()) +
parseFloat($('#numB').val())).toString()
);
});
setInterval(function () {$("#add").click()}, 1000);
});
http://jsfiddle.net/nqqfq/4/
I've seen one that requires loop (game loop), but my code isn't about gaming. It's about parsing strings.
The documentation is a bit complicated. I've tried some trial-errors, but no success so far.
Thank you for any input.

You need to invoke requestAnimationFrame repeatedly, for example:
!function frame() {
$('#add').click()
requestAnimationFrame(frame)
}()
Demo: http://jsfiddle.net/nqqfq/6/

Related

How to add .delay to .click on .each iteration (jquery)

So, I want to put delay on this JavaScript code.
$(function(){
$('.clickThis').each(function(){
$(this).click();
});
});
I tried this
$(function(){
$('.clickThis').each(function(){
$(this).click().delay(5000);
});
});
above script doesnt work .
Is there any alternative?
I've tried Google it but I still couldn't figure it out, because I have little knowledge in JavaScript.
This will do it:
$(function(){
$('.clickThis').each(function(i, that){
setTimeout(function(){
$(that).click();
}, 5000*i );
});
});
Here's a version using a recursive setTimeout loop.
$(function() {
var click = $('.clickThis').toArray();
(function next() {
$(click.shift()).click(); // take (and click) the first entry
if (click.length) { // and if there's more, do it again (later)
setTimeout(next, 5000);
}
})();
});
The advantage of this pattern over setTimeout(..., 5000 * i) or a setInterval call is that only a single timer event is ever queued at once.
In general, repeated calls to setTimeout are better than a single call to setInterval for a few reasons:
setInterval calls can queue up multiple events even if the browser isn't active, which then all fire as quickly as possibly when the browser becomes active again. Calling setTimeout recursively guarantees that the minimum time interval between events is honoured.
With setInterval you have to remember the timer handle so you can clear it
You need to write an asynchronous setTimeout loop, for more information http://www.erichynds.com/javascript/a-recursive-settimeout-pattern/
Try to use this:
$(function () {
var items=$('.clickThis');
var length=items.length;
var i=0;
var clickInterval=setInterval(function(){
items.eq(i).click();
i++;
if(i==length)
clearInterval(clickInterval);
}, 5000);
});
var $clickthis=$(".clickthis");
var i= -1;
var delayed = setInterval(function(){
if (++i < $clickthis.length) $clickthis.eq(i).trigger("click");
else clearInterval(delayed);
}, 5000);
I am not sure but I think that setTimeout function should do the trick.
See here https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout
Try
$(function(){
$('.clickThis').each(function(_,i){
var me=$(this);
setTimeout(function(){me.click()},5000*i);
);
});

How can I run jQuery load() request each n seconds?

I have following code
$('document').ready(function() {
reload();
});
function reload() {
$('div#info').load('http://somesite.ru/script.php');
setInterval(reload(), 10000);
}
but seems like method reload() runs too fast. Firefox shows me message, about jquery.min.js is sems to busy. How can I make part of page refresh one time for each 10 seconds?
You should remove the (), also put the setInterval function outside the context of the reload function.
function reload() {
$('#info').load('http://somesite.ru/script.php');
}
$(document).ready(function() {
setInterval(reload, 10000);
});
Replace:
setInterval(reload(), 10000);
with:
setInterval(reload, 10000);
Use setTimeout() instead it is safe and performance wise good than the setInterval() to fulfill your requirement.
var time= setTimeout(reload,1000);
after checking certain conditions in the reload() method call the setTimeout inside it again
function reload()
{
/// your logic
setTimeout(reload,1000);
}
use the above variable to destroy the interval whenever you don't want to reload anymore
clearTimout(time);
Refer: http://www.w3schools.com/js/tryit.asp?filename=tryjs_setinterval
setInterval(function(){reload();},10000);
Another way is just use
$('document').ready(function() {
setInterval(function() {
$('div#info').load('http://somesite.ru/script.php');
}, 10000);
});
All works fine. Thanks a lot for your answers.

jQuery animate loop

I have a problem with animate loop. There is an object i want to move in a special way and do it in loop. Are there any native options to make it? I have this:
$(function () {
function runIt() {
$('#div').show("slow");
$('#div').animate({"marginLeft":"300px"},8000);
$('#div').animate({"marginLeft":"0px"},8000);
$('#div').hide("slow", runIt);
}
runIt();
});
But it seems not so pretty.
That's the proper way to queue animations. However, there's some things that can be made to your code to make it a bit snappier and prettier:
Store a reference to the selected element in a local variable to speed up execution (less queries made to the DOM)
Clean it up by removing unnecessary quotes for object properties
Sizing is measured in pixels per default so we can use pure integers instead
The named function can be replaced with a immediately invoked anonymous function and then use arguments.callee as the callback
Here's an example showcasing the above changes:
$(function () {
var element = $("#div");
(function(){
element
.show("slow")
.animate({ marginLeft: 300 }, 1000)
.animate({ marginLeft: 0 }, 1000)
.hide("slow", arguments.callee);
}());
});
You can also do it in a more advanced way by creating your own plugin to use custom queues. I created a small fiddle a while back when I was fooling around with animation queues.
More about immediately invoked function expression can be read on Ben "Cowboy" Alman's blog.
That is how I would do it. The only suggestion I would make is to use chaining for nicer code and so the jquery object doesn't get created every time.
$(function () {
function runIt() {
$('#div').show("slow")
.animate({"marginLeft":"300px"},8000)
.animate({"marginLeft":"0px"},8000)
.hide("slow", runIt);
}
runIt();
});

jQuery attr command

I want to add a value to the onchange event, but the JS code has errors
$(args).attr('onChange', 'setTimeout('__doPostBack(\'ctl00$cpBody$txtDate\',\'\')', 0)');
anyone see error?
How about the proper jQuery/ best Javascript way:
$(args).bind('change', function () {
setTimeout(function () {
__doPostBack('ctl00$cpBody$txtDate','');
}, 0);
});
Although why the 0ms timeout period?
You can change your code to:
$(args).bind('change', function () {
__doPostBack('ctl00$cpBody$txtDate','');
});
With only the most minor functional difference (__doPostBack will be executed immediately instead of ASAP).
It's better to provide a function as the first argument of setTimeout, as opposed to a string. setTimeout is closely related to eval, and eval is bad.
Try this :
$(args).bind('Change','setTimeout('
__doPostBack(\'ctl00$cpBody$txtDate\',\'\')', 0)');
$(args).bind('change', function(e){
setTimeout(function(){
__doPostBack('ctl00$cpBody$txtDate','');
}, 0);
});
should fit a little bit better.

Call js-function using JQuery timer

Is there anyway to implement a timer for JQuery, eg. every 10 seconds it needs to call a js function.
I tried the following
window.setTimeout(function() {
alert('test');
}, 10000);
but this only executes once and then never again.
You can use this:
window.setInterval(yourfunction, 10000);
function yourfunction() { alert('test'); }
window.setInterval(function() {
alert('test');
}, 10000);
window.setInterval
Calls a function repeatedly, with a
fixed time delay between each call to
that function.
Might want to check out jQuery Timer to manage one or multiple timers.
http://code.google.com/p/jquery-timer/
var timer = $.timer(yourfunction, 10000);
function yourfunction() { alert('test'); }
Then you can control it with:
timer.play();
timer.pause();
timer.toggle();
timer.once();
etc...
setInterval is the function you want. That repeats every x miliseconds.
window.setInterval(function() {
alert('test');
}, 10000);
jQuery 1.4 also includes a .delay( duration, [ queueName ] ) method if you only need it to trigger once and have already started using that version.
$('#foo').slideUp(300).delay(800).fadeIn(400);
http://api.jquery.com/delay/
Ooops....my mistake you were looking for an event to continue triggering. I'll leave this here, someone may find it helpful.
try jQueryTimers, they have great functionality for polling
http://plugins.jquery.com/project/timers
You can use setInterval() method also you can call your setTimeout()
from your custom function for example
function everyTenSec(){
console.log("done");
setTimeout(everyTenSec,10000);
}
everyTenSec();
function run() {
window.setTimeout(
"run()",
1000
);
}

Categories

Resources