Hi I am trying to get an image to blink using the code below by changing the image. Is there something wrong with my "setTimeout"? TIA
var Test = new Array();
Test.length = 2;
for (var i = 0; i < Test.length; i++) {
Test[i] = new Image();
Test[i].src = "images/Image2" + (i+1) + ".png";
}
function ChangeImage() {
for (var i = 0; i < Test.length; i++) {
document.getElementById('Test_Image').src = Test[i].src;
}
setTimeout("ChangeImage()", 1000);
}
ChangeImage();
First.. you complicated yourself with the new Image() part. You could just use Test[i] = "images/Image2" + (i+1) + ".png";
And for your code, firstly you change the images really fast once every 1 second.
It should be something like this:
function ChangeImage() {
for (var i = 0; i < Test.length; i++) {
setTimeout(function(){document.getElementById('Test_Image').src = Test[i];
}, (i+1) *1000);
}
if(play){
setTimeout("ChangeImage()", Test.length * 1000);
}
}
This will not halt the javascript code at any point.
After 1 sec it will put image21, after 2 seconds image21 and it will call itself again and it will start all over again;
I put the variable play so you could stop the animation if you wanted.
setTimeout() is not blocking. That means it only schedules an activity to happen some time in the future and the rest of your Javascript just keeps running. So, you were scheduling Test.length setTimeout() all for the exact same time 1 second from now. Instead, you need to schedule the next image change and then, when that timer fires, you schedule the one after that and so on.
If you just want to cycle through the various images one second apart, you can do this:
function ChangeImage() {
var cntr = 0;
function next() {
if (cntr < Test.length) {
document.getElementById('Test_Image').src = Test[cntr++].src;
// after changing src, schedule next change for 1 second from now
setTimeout(next, 1000);
}
}
// start first iteration
next();
}
ChangeImage();
You may also need to make sure that all your images are properly preloaded so they display immediately when you set their source. There are numerous ways to make sure the preload is done before starting the rotation such as these:
Image preloader javascript that supports events
How do you cache an image in Javascript
Try something like this.
Edit: Accidentally put setTimeout instead of setInterval. Thanks Santi for point that out.
var Test = new Array();
Test.length = 2;
for (var i = 0; i < Test.length; i++) {
Test[i] = new Image();
Test[i].src = "images/Image2" + (i+1) + ".png";
}
var count = 0;
function ChangeImage() {
if (count >= Test.length)
count = 0;
document.getElementById('Test_Image').src = Test[count].src;
count++;
}
setInterval(ChangeImage, 1000);
Your for loop switches the src once and immediately switches it back, so you can't see it change. Try this instead:
var Test = [];
for (var i = 0; i < 2; i++) {
Test.push("images/Image2" + (i+1) + ".png");
};
var x = 0;
document.getElementById('Test_Image').src = Test[x];
(function ChangeImage() {
if(++x >= Test.length) x = 0;
document.getElementById('Test_Image').src = Test[x];
setTimeout(ChangeImage, 1000);
})();
EDIT: As Santi pointed out, my original solution only supported two images, while OP requested to loop through an array.
Related
let colors = ["red","green","cyan"];
let start = colors[0];
let div = document.getElementById("color");
setInterval(function(){
document.getElementById("color").style.backgroundColor=colors[0];
for(var x = 0; x < colors.length; x++){
document.getElementById("color").style.backgroundColor=colors[x];
if(colors[x] == colors[colors.length-1]){
div.style.backgroundColor=start;
colors[x]++;
}
}
},500);
Basically, it loops through the colors but it doesn't reset. What am I actually doing wrong here?
Update:
Thanks to the answer below, I was able to understand what I was doing incorrectly. I've re-written it based on the way I was trying to do it with For Loops.
let colors = ["red","green","cyan","purple","grey"];
let div = document.getElementById("color");
document.getElementById("color").style.backgroundColor=colors[0];
for(let x = 0; x < (colors.length / colors.length); x++){
var i = x;
div.style.backgroundColor=colors[i];
}
setInterval(function(){
div.style.backgroundColor=colors[i];
i++;
if(i==colors.length){
i=0;
}
},300);
Although inefficient, this is the way I wanted to do it solely for the purpose of testing purposes.
You are running the for loop every 500ms ... but each color change is done within the loop immediately
There's no time for the browser to show anything else but the last background
If what you want to do is simply cycle through those colors, the code is very simple
let colors = ["red","green","cyan"];
let index = 0;
let div = document.getElementById("color");
setInterval(function(){
div.style.backgroundColor=colors[index];
index = (index + 1) % colors.length;
},500);
<div id="color">
DIV!
</div>
I'm trying to implement something that looks like a console window, but on a webpage. I'd like it to just write a new line pinging an API every second or so. I have:
for (i = 0; i < 5; i++) {
text = httpGet('APICALL' );
document.write(text + '<br>');
sleep(1000);
}
This however, runs ALL the calls first and then writes. How can I change this?
EDIT:
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
You should use something like setTimeout, which is a standard way of doing it:
var sleepTime = 1000;
var i = 0;
setTimeout(function readNextMessage() {
if (i < 5) {
text = httpGet('https://turbine-farm.run.aws-usw02-pr.ice.predix.io/api/turbines/1/heartbeat' );
document.body.innerHTML += text + '<br>';
}
i += 1;
setTimeout(readNextMessage, sleepTime);
}, sleepTime);
You cant sleep a webpage. Your sleep function is doing this:
Enters into a loop of 1e7 steps.
Each step does a difference and compares it to a number.
It breaks if comparison is true.
Those 3 steeps, in a modern computer, are done in less than a second.
How can I restart this code every 10-20 sec.I cant seem to figure it out!
This is the code. (I'm still new any help would be great.)
var items = document.getElementsByClassName('btn-primary next-btn slide-transition ');
for (var i = 0; i < items.length; i++) {
items[i].click();
}
Here you are:
window.setInterval(function(){
var items = document.getElementsByClassName('btn-primary next-btn slide-
transition');
for (var i = 0; i < items.length; i++) {
items[i].click();
}
}, 10000);
It sets up your code as a function that is executed every 10000 millliseconds
You could Just refresh the Page too
Var x = 900000;
setTimeout(function(){
window.location.reload(1);
}, x);
Every x millisecond
Careful though; you will lose the current JavaScript variables that didn't get posted to a database
As per your comment, if you want to execute code every refresh then below code will help you.
var timer;
function StartTimer() {
timer = window.setTimeout(function(){
var items = document.getElementsByClassName('btn-primary next-btn slide-
transition');
for (var i = 0; i < items.length; i++) {
items[i].click();
}
},10000);
}
StartTimer();
I'm trying to loop through an array of images but can't seem to get past image 2.
The array should also loop back to 1 when the last image has passed...
var WorkArray = new Array('work/01.png', 'work/02.png', 'work/03.png', 'work/04.png');
var nelements = WorkArray.length;
preload_image_object = new Image();
var i = 0;
for(i=0; i<=nelements; i++) {
preload_image_object.src = WorkArray[i];
}
function cC() {
var nelements = WorkArray.length;
var i = 0;
for(i=0; i<=nelements; i++) {
nelements = WorkArray[i];
}
document.getElementById("work").style.backgroundImage="url('"+WorkArray[i]+"')";
}
You can save the current file and use modulo to run in cyclic manner.
It will look something like that:
var WorkArray = new Array('work/01.png', 'work/02.png', 'work/03.png', 'work/04.png');
var currentImage = 0
function nextImage(){
currentImage = (currentImage + 1) % WorkArray.length;
document.getElementById("work").style.backgroundImage="url('"+WorkArray[currentImage]+"')";
}
You are overwriting nelements with the current element of the loop:
nelements = WorkArray[i];
The following should fix your loops:
var WorkArray = new Array('work/01.png', 'work/02.png', 'work/03.png', 'work/04.png');
var preload_image_object = new Image();
/* Lets get rid of `nelements`, as its just confusing. Get the length here.
* If, for performace reasons you want to use elements, the best way is to reverse
* aka for(var i = WorkArray.length-1; i >= 0 ; i--)
* Also, its simpler to declare the var in your for-loop itself instead of outside of it.
*/
for(var i = 0; i <= WorkArray.length; i++){
preload_image_object.src = WorkArray[i];
}
Also, again for simplifications sake, your application of the background-image could be done inside your for loop as well, and can be made to look cleaner with some spaces and omitting the ' inside your url():
document.getElementById("work").style.backgroundImage = "url(" + WorkArray[i] + ")";
I have a bunch of testimonials for my site which are currently on a page and am trying to get a div to display each 1 at an interval of 5 seconds, if the array reaches the last value it should start back to beginning of the array again.
Here is what I have so far...
var testimonial = new Array();
testimonial[1] = "Rugby";
testimonial[2] = "Baseball";
testimonial[3] = "Cricket";
var length = testimonial.length
var i = 1;
setInterval(function() {
while (i <= length) {
$('#testimonials p').html(testimonial[i]);
++i;
if (i == length) {
i == 1;
}
}
}, 5000);
Any help would be great, thanks.
Try
var testimonial = ['Rugby', 'Baseball', 'Cricket'];
var numTestimonials = testimonial.length;
var index = 0;
setInterval(function() {
$('#testimonials p').text(testimonial[index]);
index = (index + 1) % numTestimonials;
}, 5000);
JavaScript arrays are 0-indexed and have handy array literal syntax. Using the modulus operator (%) is an idiomatic way of wrapping a counter back to 0 once it reaches a certain value.
You can try
setInterval(function() {
$('div').html(test[ (i = (i + 1) % length) ]) },
5000);
The function in setInterval is being called every 5 seconds. That means you display the 5 testimonials one after another really quick every 5 seconds instead of displaying them one after the other.
You should do something like:
var testimonial = new Array();
testimonial[1] = "Rugby";
testimonial[2] = "Baseball";
testimonial[3] = "Cricket";
var length = testimonial.length
var i = 0; // arrays start with 0
setInterval(function() {
$('#testimonials p').html(testimonial[i]);
i++;
if (i == length) i = 0;
}, 5000);
Many interesting answers, so one more won't hurt. :-)
You can bundle it all up in an immediately called function expression:
(function() {
var testimonials = ['Rugby', 'Baseball', 'Cricket'];
var i = 0;
setInterval(function() {
$('#testimonials p').text(testimonials[++i % testimonials.length]);
}, 5000);
}());