Creating a Delay

[peterinwa]

What is the easiest way to create a delay or pause? For example:

line 1 of code
timing delay or pause
line 3 of code

I searched Google and got many complex codes for timers. I'm surprised there isn't something simple like delay(500).

I tried to create something simple but it didn't work:

setTimeout("pass()",500);
function pass(){}

Or thinking that the function might actually have to do something:

setTimeout("pass()",500);
function pass(){x=1}

Can you point me in the direction of a simple routine just to pause for some time?

Thanks, Peter

[CaseyRyan]

You could run it this way. Call part1 and have that function do the delay before calling part2. THere are a few other ways to do it, but I know this would work.

function part1(){ 
/* Do some stuff */ 
setTimeout("part2()",500); 
} 
function part2(){ 
/* do some more stuff */ 
} 
/* Kick it off */ 
part1(); 

-=casey=-

[peterinwa]

Thanks, got it working just fine. Now I can do a loop to repeat it.

// Function to flash banner
function flash(){
temp=idB1.innerHTML;
setTimeout("hideText()",500)}

// Function to hide text
function hideText(){
idB1.innerHTML=" ";
setTimeout("showText()",500)}

// Function to show text
function showText(){idB1.innerHTML=temp}

FYI at first I tried:

// Function to flash banner
function flash(){
temp=idB1.innerHTML;
setTimeout("hideText()",500);
setTimeout("showText()",500)}

but it didn't wait to complete the first setTimeout before starting the timer on the second!

[CaseyRyan]

yeah, I was originally thinking about putting them all in a list but figured that it would fire them off without waiting. The quickest way to do it was to chain the functions together. As long as you're always executing them in a set order, you should be fine.

..thinking more about it, if you needed to support different execution paths, you could always pass in parameters whihc tell the initial function what to call next or if it should call any function at all. You could also pass in the delay or set global variables for the delay.

-=casey=-

[Bernard Marx]

but it didn't wait to complete the first setTimeout before starting the timer on the second!

setTimeout/Interval aren't like that. They are asynchronous, and start a new thread. The current one just carries on. Browser APIs don't have any kind of 'sleep' function.

A couple of suggestions:

1. If idB1 is the actual id of the element in question, then I guess you are only testing this in IE. Using a plain id as an object reference will not work on most other browsers.

2. innerHTML is well supported - but not universally. Might as well just flash the display property instead. It's easier too. (Swap it for the visibility property for a different effect)

3. This can be done in a single function, as below. Stylesheet props can't be read via the local style object, so this does require that either:
- The element starts as display:none, or
- The initial display value is specified using inline CSS.

function flashText()
{ 
  var style = document.getElementById('idB1').style;
  style.display = style.display=='none'? 'block':'none';
  setTimeout("flashText()",500);
}

[peterinwa]

Thanks, I have it working fine now and I coded it to run only with IE so it doesn't give an error message with Netscape or others.

Peter

[Bernard Marx]

I coded it to run only with IE so it doesn't give an error message with Netscape or others.

Your call, of course, but it's such a simple feature that it seems a pity to exclude the growing proportion of non-IE users.

If you would really prefer to stick with the innerHTML approach, you could include the majority by just testing for the innerHTML property:

var elm = document.getElementById('idB1';)
if(!elm.innerHTML) return;
..do stuff with elm..

[peterinwa]

Thanks. Thing was, I got it working and didn't understand your code in your example.

In your new code, could you please explain the second of the two lines?

I see the first is checking to see if it exists but not sure how the it all works.

Thanks, Peter

[Bernard Marx]

Well, for instance, hideText could look like this:

function hideText()
{
  var elm = document.getElementById('idB1');
  if(!elm.innerHTML && elm.innerHTML!='') return ; // stop if innerHTML not supported
  elm.innerHTML=" ";
  setTimeout("showText()",500)
} 

First a reference to the elment is put into a local variable for brevity.
Then we see if it has an innerHTML property. In fact, we are testing for a false value. If it is not supported, it's value will be undefined - ie false. BUT an empty string would also be false value, so we check just in case it's that.

It's OK to test possibly non-existent properties of objects. You won't get an error (as long as the object itself exists).

If it passes the test, we continue.

[peterinwa]

Thanks!