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.

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

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"
);

These days, you can safely write

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

instead.
var picture_num1 = 0;

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];

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];

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()">

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>

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

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;
}

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.

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..

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.

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top