AJAX

Which function to use for inserting string on a timer?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2006

Posts: 174

Reputation: tefflox is an unknown quantity at this point

Solved Threads: 1

tefflox

Offline

Junior Poster

Which function to use for inserting string on a timer?

Apr 18th, 2007

I'm learning javascript. My first idea has led to a problem. I'm trying to set up strings to load at random intervals on different parts of the page, but I don't know the right function to use with setTimeout(). I hear "don't use document.write" and "probably don't use innerHTML", but are other functions outside of javascript? Please help.

•

Join Date: Jul 2006

Posts: 174

Reputation: tefflox is an unknown quantity at this point

Solved Threads: 1

tefflox

Offline

Junior Poster

Re: Which function to use for inserting string on a timer?

Apr 18th, 2007

For instance, why won't this code work?

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
// this is in the head, other functions working fine
function addTextNode() {
    var newtext = document.createTextNode(" Some text added dynamically. ");
    var para = document.getElementById("p1");
    window.setTimeout("para.appendChild(newtext);", 1000);
}
// this is in the head, other functions working fine
function addTextNode() {
    var newtext = document.createTextNode(" Some text added dynamically. ");
    var para = document.getElementById("p1");
    window.setTimeout("para.appendChild(newtext);", 1000);
}

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
//this is in the body
<div style="border: 1px solid red">
    <p id="p1">First line of paragraph.</p>
</div><br />
 
<button onclick="addTextNode();">add another textNode</button>
//this is in the body
<div style="border: 1px solid red">
    <p id="p1">First line of paragraph.</p>
</div><br />

<button onclick="addTextNode();">add another textNode</button>

•

Join Date: Sep 2005

Posts: 1,081

Reputation: digital-ether is just really nice

Solved Threads: 66

digital-ether digital-ether is offline

Offline

Veteran Poster

Re: Which function to use for inserting string on a timer?

Apr 18th, 2007

setTimeout() can also take a function as the first parameter.

Using an anonymous function you can rewrite your JS code as:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
// example of using a JS closure to persist a lexical environment/scope
function addTextNode() {
    var newtext = document.createTextNode(" Some text added dynamically. ");
    var para = document.getElementById("p1");
    window.setTimeout(function() { para.appendChild(newtext); }, 1000);
}
// example of using a JS closure to persist a lexical environment/scope
function addTextNode() {
    var newtext = document.createTextNode(" Some text added dynamically. ");
    var para = document.getElementById("p1");
    window.setTimeout(function() { para.appendChild(newtext); }, 1000);
}

What happens is that setTimeout() is executed in the scope of the window (global scope). The variables "newtext" and "para" are private to the function addTextNode(), thus they only exist in the scope of that function.

When you however use a function instead of a string as the first parameter of setTimeout(), what happens is that JS will create a closure that makes "para" and "newtext" available in the scope of the anonymous function.

This is a valuable part of the JS language that will take care of scope issues for you instead of having you resort to using the global scope.

You could also use the global scope:

eg:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
// example of using a JS closure to persist a lexical environment/scope
function addTextNode() {
    newtext = document.createTextNode(" Some text added dynamically. ");
    para = document.getElementById("p1");
    window.setTimeout("para.appendChild(newtext);", 1000);
}
// example of using a JS closure to persist a lexical environment/scope
function addTextNode() {
    newtext = document.createTextNode(" Some text added dynamically. ");
    para = document.getElementById("p1");
    window.setTimeout("para.appendChild(newtext);", 1000);
}

but you will run into issues of overwriting the variables as they are available globally.

The closure is private to the function creating the closure however. So it cannot be overwritten from the global scope.

This is used a lot with the XMLHttpRequest object. And also with Event handlers, mostly unknowingly.

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!