setInterval problem?

  • Thread starter The Mysterious Mr. Rocco
  • Start date
T

The Mysterious Mr. Rocco

Hi,
I'm trying to write a small piece of javascript, which will
alternately show two small red and yellow dots, with a time difference
of 500 ms between showing red and yellow. Then, I'd like the animation
to pause for 5 seconds, and then go back to the red/yellow sequence,
then pause for 5 seconds etc.

This is the code I've come up with:


// xml, DTD declarations to do later, etc.
<html>
<head>
<script type="text/javascript" language="JavaScript">

var pictures1 = new Array
// List all the pictures in the slideshow here
(
"red_dot.JPG"
,"yellow_dot.JPG"
);


var picture_num1 = 0;

var current_picture1 = new Image();

current_picture1.src = pictures1[picture_num1];

function start_show()
{
// Time is in milliseconds
setInterval("slideshow()", 500);
}

function slideshow()
{
picture_num1++;

if (picture_num1 == pictures1.length)
{
/// xxxxxxxxxxxxxxxxxxxx
picture_num1 = 0;
}

current_picture1.src = pictures1[picture_num1];

document["rotating_picture1"].src = current_picture1.src;
}
</script>
</head>
<body OnLoad="start_show()">
<style type="text/css">
..imgA1 { position:absolute; top: 25px; left: 25px; z-index: 1; }
..imgB1 { position:absolute; top: 25px; left: 25px; z-index: 3; }
</style>

<img class=imgA1 src="backdrop.JPG">
<img name="rotating_picture1" class=imgB1 src="red_dot.JPG">

</body>
</html>

I've managed to get the red/yellow flicking working, but can't get the
pause to work between
the red/yellow cycles.
I've tried putting in setTimeout("resetarray()", 5000); at the line
marked // xxxxxxxxxxx
with
function resetarray()
{
picture_num1 = 0;
}

but the javascript just hangs. I've tried putting in a simple timer,
comparing Date.getTime() with
(Date.getTime() + pause_interval) but this just hangs with a dialog
box saying that the "script has stopped responding" type message from
the browser..

Can anyone help?

Thanks

Trev
 
T

Thomas 'PointedEars' Lahn

The said:
I'm trying to write a small piece of javascript, which will
alternately show two small red and yellow dots, with a time difference
of 500 ms between showing red and yellow. Then, I'd like the animation
to pause for 5 seconds, and then go back to the red/yellow sequence,
then pause for 5 seconds etc.

This is the code I've come up with:

// xml, DTD declarations to do later, etc.
Click to expand...

_Not_ DTD (document type definition) declaration, but _document type
(DOCTYPE) declaration_.
<html>
<head>
<script type="text/javascript" language="JavaScript">
Click to expand...

The `language' attribute is deprecated in HTML 4.01 and XHTML 1.0.
It is invalid in HTML 4.01 Strict, XHTML 1.0 Strict, and XHTML 1.1.
var pictures1 = new Array
// List all the pictures in the slideshow here
(
"red_dot.JPG"
,"yellow_dot.JPG"
);
Click to expand...

These days, you can safely write

var pictures1 = ["red_dot.JPG", "yellow_dot.JPG"];

instead.
var picture_num1 = 0;
Click to expand...

You could augment the Array instance with a user-defined property or use a
user-defined object instead, thereby saving a few global variables and
reducing potential side-effects.
var current_picture1 = new Image();

current_picture1.src = pictures1[picture_num1];
Click to expand...

Not necessary.
function start_show()
{
// Time is in milliseconds
setInterval("slideshow()", 500);
window.setInterval(...)

}

function slideshow()
{
picture_num1++;

if (picture_num1 == pictures1.length)
{
/// xxxxxxxxxxxxxxxxxxxx
picture_num1 = 0;
}

current_picture1.src = pictures1[picture_num1];
Click to expand...

That statement is not necessary and does not make sense with regard to the
following statement. In the worst case (no caching) you will be downloading
the image data twice.
document["rotating_picture1"].src = current_picture1.src;
}
</script>
</head>
<body OnLoad="start_show()">
Click to expand...

If it is XHTML, it must be `onload'.
<style type="text/css">
.imgA1 { position:absolute; top: 25px; left: 25px; z-index: 1; }
.imgB1 { position:absolute; top: 25px; left: 25px; z-index: 3; }
</style>
Click to expand...

The `style' element belongs in the `head' element.
<img class=imgA1 src="backdrop.JPG">
<img name="rotating_picture1" class=imgB1 src="red_dot.JPG">
Click to expand...

Avoid mixed-case filenames to account for different case-sensitivity in
filesystems.

If it should be HTML, it must be at least

<img class=imgA1 src="backdrop.JPG" alt="">
<img name="rotating_picture1" class=imgB1 src="red_dot.JPG" alt="">

If it should be XHTML, it must be at least

<img class="imgA1" src="backdrop.JPG" alt="" />
<img name="rotating_picture1" class="imgB1" src="red_dot.JPG" alt="" />

See also said:
</body>
</html>

I've managed to get the red/yellow flicking working, but can't get the
pause to work between
the red/yellow cycles.
I've tried putting in setTimeout("resetarray()", 5000); at the line
window.setTimeout(...);

marked // xxxxxxxxxxx
with
function resetarray()
{
picture_num1 = 0;
}
Click to expand...

window.setTimeout() no more causes the script to wait than
window.setInterval(). It plans execution for the code passed (as a string
literal or Function object reference) the approximate number of milliseconds
after the call returned.

In order to have the animation stop, you need to call clearInterval() and
for this you have to assign the return value of setInterval() to a property
that you can pass to clearInterval(). After that you can call start_show()
again after the desired pause:

var intv;

function start_show()
{
intv = window.setInterval("slideshow()", 500);
}

function slideshow()
{
picture_num1++;

if (picture_num1 == pictures1.length)
{
window.clearInterval(intv);
window.setTimeout("start_show()", 5000);
picture_num1 = 0;
}

// ...
}

Better (untested):

var slideshow = {
slides: ["...", "..."],
delay: 500,
index: 0,

start: function() {
var me = this;
this.intv = window.setInterval(function() { me.next(); },
this.delay);
},

startDelayed: function(ms) {
var me = this;
window.setTimeout(function() { me.start(); me = null; }, ms);
},

stop: function() {
window.clearInterval(this.intv);
},

next: function() {
this.index++;

if (this.index >= this.slides.length)
{
this.stop();
this.startDelayed(5000);
this.index = 0;
}

// ...
}
};
</head>

...

but the javascript just hangs.
Click to expand...

Not here.
I've tried putting in a simple timer,
comparing Date.getTime() with
(Date.getTime() + pause_interval) but this just hangs with a dialog
box saying that the "script has stopped responding" type message from
the browser..
Click to expand...

Works as designed. You must not run scripts in a tight loop.


PointedEars
 
D

Dr J R Stockton

In comp.lang.javascript message <00f9b1b6-f971-4ee1-ba0d-0f19514880ec@w1
9g2000yqk.googlegroups.com>, Sun, 15 Nov 2009 15:53:43, The Mysterious
Mr. Rocco said:
I'm trying to write a small piece of javascript, which will
alternately show two small red and yellow dots, with a time difference
of 500 ms between showing red and yellow. Then, I'd like the animation
to pause for 5 seconds, and then go back to the red/yellow sequence,
then pause for 5 seconds etc.
Click to expand...

The simple way will be to use setInterval to obtain a 500 ms clock.

When it ticks, increment a counter. Use that counter to determine what,
if anything, to do at the moment.

When the cycle needs to repeat, set the counter back to zero, just like
a clock where the seconds go 58 59 0 1 ... .

Alternatively, use only setTimeout, and after each event calculate and
set the delay to the next event.

Recent Windows has ticks at convenient intervals, older at inconvenient
ones; simple clocks used to drift with respect to "real" time.

If timing must be long-term accurate on any machine, use the setTimeout
method, calling new Date() at each event and including that in the delay
calculation.

See <URL:http://www.merlyn.demon.co.uk/js-index.htm>
and <URL:http://www.merlyn.demon.co.uk/js-dates.htm>.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I am trying to detect Which image id="" was clicked ? 22
Need help , Having problem with Drag n Drop ? 9
Newbie needs help with setInterval 2
Timing problem 4
Need help , Having problem with Drag n Drop... 1
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Please Help? 0
Help With a Script 5

Members online

Total: 52 (members: 1, guests: 51)
Robots: 424

Forum statistics

Threads
473,982
Messages
2,570,186
Members
46,740
Latest member
JudsonFrie

Latest Threads

Top