PDA

View Full Version : I need help diagnosing why this randomisation loop is not looping

Jydeda
01-24-2008, 03:50 PM
Can anyone help with diagnosing why the code below goes through the loop once then stalls.

It selects an image from the list and calls up two other related images.

It should then should go back to the beginning and select another starting image from the list and repeat the process . . . . .

<html>
<head>
<script type="text/javascript">
var interval = 1.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
var path_prefix = 'E:/path/leading/to/images/';
interval *= 1000;

var image_index = 0;
var image_list = [
'01BbStv.jpg','02B0Stv.jpg','03C0Stv.jpg','04DbStv.jpg','05D0Stv.jpg',
'06EbStv.jpg','07E0Stv.jpg','08F0Stv.jpg','09GbStv.jpg','10G0Stv.jpg',
'11AbStv.jpg','12A0Stv.jpg','13BbStv.jpg','14B0Stv.jpg','15C0Stv.jpg',
'16DbStv.jpg','17D0Stv.jpg','18EbStv.jpg','19E0Stv.jpg','20F0Stv.jpg',
'21GbStv.jpg','22G0Stv.jpg','23AbStv.jpg','24A0Stv.jpg','25BbStv.jpg',
'26B0Stv.jpg','27C0Stv.jpg','28DbStv.jpg','29D0Stv.jpg','30EbStv.jpg',
'31E0Stv.jpg','32F0Stv.jpg','33GbStv.jpg','34G0Stv.jpg','35AbStv.jpg',
'36A0Stv.jpg','37BbStv.jpg','38B0Stv.jpg','39C0Stv.jpg','40DbStv.jpg',
'41D0Stv.jpg','42EbStv.jpg','43E0Stv.jpg','44F0Stv.jpg','45GbStv.jpg',
'46G0Stv.jpg','47AbStv.jpg'];

var number_of_images = image_list.length;

function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
image_index = random_display ? generate(0, number_of_images) : (++image_index) % number_of_images;
return image_list[image_index];
}
function rotateImage() {
var new_image = getNextImage();
//Image one
var img1 = function () {
document.getElementById('sImage').src = path_prefix + new_image;
//Go to the second part of the loop
setTimeout(img2, interval);
}
//Image two
var img2 = function () {
document.getElementById('kImage').src = path_prefix + new_image.replace(/.{3}\./, 'key.');
//Go to the third part of the loop
setTimeout(img3, interval);
}
//Image three
var img3 = function () {
document.getElementById('fImage').src = path_prefix + new_image.replace(/.{3}\./, 'Fbd.');
}
//Re-Start the loop
setTimeout(img1, interval);
}
window.onload = function() {
setTimeout(rotateImage, interval);
}
</script>
</head>
A1ien51
01-24-2008, 06:17 PM
It is rather simple if you walk through your code and say what it does out loud. You are not restarting the function when you get to the 3rd step.

var img3 = function () {
document.getElementById
setTimeout(rotateImage, interval); //you need to load it over again
}

The comment you have saying it is restarting is wrong. It is not restarting..it is firing the first step in the loop. You probably do not want a timeout there, just the function call to fire img1();

Eric
Jydeda
01-24-2008, 09:21 PM
Thanks . . . . I've tried making the adjustments but its still not recognizing where the loop should start. How would you suggest this should be scripted
A1ien51
01-24-2008, 09:56 PM
It really is not that hard:

<html>
<head>
<script type="text/javascript">
var interval = 1.5;
// delay between rotating images (in seconds)
var random_display = 1;
// 0 = no, 1 = yes
var path_prefix = 'E:/path/leading/to/images/';
interval *= 1000;

var image_index = 0;
var image_list = [
'01BbStv.jpg', '02B0Stv.jpg', '03C0Stv.jpg', '04DbStv.jpg', '05D0Stv.jpg',
'06EbStv.jpg', '07E0Stv.jpg', '08F0Stv.jpg', '09GbStv.jpg', '10G0Stv.jpg',
'11AbStv.jpg', '12A0Stv.jpg', '13BbStv.jpg', '14B0Stv.jpg', '15C0Stv.jpg',
'16DbStv.jpg', '17D0Stv.jpg', '18EbStv.jpg', '19E0Stv.jpg', '20F0Stv.jpg',
'21GbStv.jpg', '22G0Stv.jpg', '23AbStv.jpg', '24A0Stv.jpg', '25BbStv.jpg',
'26B0Stv.jpg', '27C0Stv.jpg', '28DbStv.jpg', '29D0Stv.jpg', '30EbStv.jpg',
'31E0Stv.jpg', '32F0Stv.jpg', '33GbStv.jpg', '34G0Stv.jpg', '35AbStv.jpg',
'36A0Stv.jpg', '37BbStv.jpg', '38B0Stv.jpg', '39C0Stv.jpg', '40DbStv.jpg',
'41D0Stv.jpg', '42EbStv.jpg', '43E0Stv.jpg', '44F0Stv.jpg', '45GbStv.jpg',
'46G0Stv.jpg', '47AbStv.jpg'];

var number_of_images = image_list.length;

function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;

}
function getNextImage() {
image_index = random_display ? generate(0, number_of_images) : (++image_index) % number_of_images;
return image_list[image_index];

}
function rotateImage() {
var new_image = getNextImage();
//Image one
var img1 = function() {
document.getElementById('d1').innerHTML = path_prefix + new_image + " " + new Date();
//Go to the second part of the loop
setTimeout(img2, interval);

}
//Image two
var img2 = function() {
document.getElementById('d2').innerHTML = path_prefix + new_image.replace(/.{3}\./, 'key.') + " " + new Date();
//Go to the third part of the loop
setTimeout(img3, interval);

}
//Image three
var img3 = function() {
document.getElementById('d3').innerHTML = path_prefix + new_image.replace(/.{3}\./, 'Fbd.') + " " + new Date();
setTimeout(rotateImage, interval); //you need to restart it here
}
//initialize img1
img1();

}
window.onload = function() {
setTimeout(rotateImage, interval);

}
</script>
</head>
<body>
<div id="d1"></div><div id="d2"></div><div id="d3"></div>
</body>
</html>


Eric
Jydeda
01-25-2008, 10:48 AM
Hey thanks Thats great. Obviously I'm going to have to sit down with a user friendly text on Java script if I want to continue experimenting with it. Anyway many thanks for the assist.