How do I call a given function every X seconds?
In this case, I made a function that scrolls some images. I want the image to change based on a given interval of time, for example, every 5 seconds, but I really have no idea.
No need for jQuery here, plain JavaScript using setInterval() will do:
function myFunctionName() {
//change image here
}
setInterval(myFunctionName, 5000);
Or the anonymous version:
setInterval(function () {
//change image here
}, 5000);
Try
setInterval(function, Xseconds);
If you want jQuery to do it for you, there is a plugin, jquery.cycle.all. This will make creating the transition very easy. If you're using jQuery already, then it might be a good fit. Otherwise, the setInterval is easy to work with that other posters already mentioned.
Related
Good evening, I have a javascript function to set background color, etc when user onclick the table row. The function does not perform correctly unless it is called twice or when I press F12 for development tools, similar situation as Function doesn't correctly perform unless it is called twice.
I managed to handle it as below but the problem is that, when the user onclick the table row, it needs around 2-3 seconds for the background color to be change. How can I reduce the time for the function to perform twice?
JavaScript
<SCRIPT LANGUAGE="JavaScript">
setBackGroundColorOnIE (tableRowNumber) {
//........
//........
setBackGroundColorOnIE (tableRowNumber)//I need the function to perform twice in one call
}
</SCRIPT>
I know it is a bad practice, but I'm really have no idea on how to fixed the compability issues in IE9. So, I came out with something like this. Need some hints and advices, thanks in advanced.
you could add some condition to check if your function need to run again, like:
function setBackGroundColorOnIE (tableRowNumber) {
//check if your condition is met
if( some_condition) {
var timerId = setTimeout(function() {
setBackGroundColorOnIE (tableRowNumber);
}, 5000); //set to 5 seconds
}
else {
clearTimeout ( timerId );
}
}
//call the function
setBackGroundColorOnIE(some_value);
An easy solution would be to include jquery ui which would allow you to change the color and then have a callback when the color change is completed. Here is a JS fiddle with jquery and jquery ui. http://jsfiddle.net/kqMs9/
$(function(){
$('button').on('click', function(){
$('.background').animate({
backgroundColor: '#000'
}, 1500, function(){ alert('background-color changed!');});
});
});
In my application I have a script that tells when somebody comes online or goes offline. I put the text of if somebody goes online/offline via content = name+' went offline' or vice versa. I then put that text in a div at the end of my function call: $('#new').text(content);
The problem comes with the fade out, all in all it's not really working. I've been trying to play around with it. Here's what I have so far:
$('#new').text(content);
$('#new').fadeIn('slow', function() {
setTimeout($('#new').fadeOut('slow', function() {
$('#new').css('display', 'none');
}));
});
display:none inside the callback is unnecessary, fadeOut() automatically sets the display to none after concluding.
$('#new').text(content);
$('#new').fadeIn('slow', function() {
setTimeout("$('#new').fadeOut('slow');", 2000);
});
2000 is the number of miliseconds you'd like to delay it, change it to whatever value suits you better.
As #Pst commented, the function-object may be more consistent even though I personally have more issues with function-objects than code strings.
You may also use the function-object:
$('#new').text(content);
$('#new').fadeIn('slow', function() {
setTimeout(function(){ $('#new').fadeOut('slow'); }, 2000);
});
You need to remember to provide duration for which the setTimeout should wait before acting.
$("#hello")
.text(content)
.fadeIn("slow", function(){
setTimeout(function(){
$("#hello").fadeOut();
}, 2000);
});
2000 indicates 2 seconds. If you would like it to stay visible longer, increase this.
Functional Demo: http://jsbin.com/aciwon/edit#javascript,html
Are you using this inside a $(document).ready()? If not, place it like:
$(document).ready(function() {
$('#new')
.text(content)
.fadeIn('slow', function() {
setTimeout(function() { $('#new').fadeOut('slow'); }, 2000);
});
});
Also, be sure to initialize your element with a display: none and note I've removed part of the unecessary code.
Your setTimeout() code is wrong, you have to pass a function to it.
Why not just use delay?
$("#new").text(content).fadeIn("slow").delay(1000).fadeOut("slow");
I'm trying to make simple slider by using setinterval and jquery.
you can have a look here http://jsfiddle.net/5m2Dq/
Slider works fine when it is in focus on browser but when we go to different tab for more than 5 min all the div's come's under each other, and start toggling.
$('#fbLoginSlide div:gt(0)').hide();
setInterval(function(){
$('#fbLoginSlide :eq(0)').fadeOut('slow').hide()
.next('div.loginSlide').fadeIn('slow')
.end().appendTo('#fbLoginSlide');
},2000);
Is there a simple way to achieve the sliding effect like this without any plugin.
This occurs probably because your browser starts missing timeouts. Especially if you are viewing another tab, the browser thinks that it is not important to call the callback with exactly 2 second intervals. You should ditch the setInterval function altogether! Use instead the completion callback of fadeOut and fadeIn to trigger the effects.
Try something like
var cycle = function() {
$('#fbLoginSlide :eq(0)').fadeOut('slow').hide()
.next('div.loginSlide').fadeIn('slow', function() { setTimeout(cycle, 1500); })
.end().appendTo('#fbLoginSlide');
};
cycle();
I'm struggling with the timer part. I can replace one image with another easily with javascript by calling the function. What I want to be able to do is set a timer to sit and change the images at a specific interval (say 1 second).
I've used jQuery to refresh an image every second before, but when I try and add a function inside to change the image, it just hangs.
you can use setinterval function of javascript:
setInterval(function,time); //ex: setInterval(myfunction,1000)
setInterval will also return a pointer to time which can be used later on to clearInterval
var interval = setInterval(myfunction,1000);
later you can use:
clearInterval(interval)
I'm required to develop a slideshow (not an existing one) with jQuery. I was able to change picture with a function that I created named changePic (takes an image link). It incorporates the fading animation from the jQuery library.
For the slideshow I'm trying to use a while loop. It kind of works, except that it doesn't wait for the animation to finish.
How do I, a) wait for the animation to finish, b) delay the changing picture so it display the picture for a couple of seconds?
Also tried Settimeout, and it doesn't work.
Edit:
Basically changing image is like this:
function changePic(imglink){
var imgnode = document.getElementById("galleryimg");
$(imgnode).fadeTo(500, 0, function(){
$(imgnode).attr("src", imglink);
$(imgnode).fadeTo(1000, 1);
})
}
and the slideshow code is like this, but obviously it shouldn't.
function slideshow(gallerylinks){
var i=0;
while (i<gallerylinks.length){
changePic(gallerylinks[i]);
i++;
}
}
You could always try ditching the while loop, and going with a perpetually recursive function...
on the .animate, you could add a timeout function (at whatever interval) that calls the changePic function. As I have no idea what your code looks like, I will provide a fantastically generic outline.
/* array of imgUrls */
var imgUrls = new Array(); //populate it however
changePic(slideToShowIndex, fadeOutSpeed, fadeInSpeed, slideDelay)
{
$('#slideHolder').animate({ opacity: 0}, fadeOutSpeed , function(){
$('#slideHolder').attr('src', imgUrls[slideToShowIndex]);
$('#slideHolder').animate({ opacity: 1 }, fadeInSpeed, function() {
setTimeout(function() { changePic(slideToShowIndex+1, fadeOutSpeed, fadeInSpeed, slideDelay);}, slideDelay});
});
}});
}
$(document).ready(function() {
changePic(0, 5000, 5000, 10000);
});
This should (in theory) fade the image out, swap it with the new one, and fade it in (both taking 5 seconds) and then adding a delay to call itself with the next slide index in 10 seconds.
This is in no way perfect, but does outline the general idea. Since we have no idea what your code looks like, I can only assume your setTimeout was in the wrong spot. Doing it like this will make sure that the animation has finished before the timeout is set. This guarantees that the slide wont change until after the animation has changed.
of course you could always use a combination of the ':not(:animated)' selector and a setInterval to achieve much the same effect.
EDIT: made a slight change to stack the animations properly. The thoery behind this still works even with the OPs addition of code.
You could have provided more details or example code but have a look at stop() and delay() functions.