Welcome to WebmasterWorld Guest from 54.196.231.129

Forum Moderators: open

Message Too Old, No Replies

random choice from array of functions

     
9:36 am on Mar 21, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts:112
votes: 0


Hi,

Not sure how to randomly call one function from an array of three functions: I've tested the functions individually, they're jQuery AJAX calls, and they'r ok. This is what I've got:

function page1() {
$('#readout').load('readouts/page1.htm')}

function page2() {
$('#readout').load('readouts/page2.htm')}

function page3() {
$('#readout').load('readouts/page3.htm')}

incomplete function:

function doPage() {
var pages = new Array("page1()","page2()","page3()");
// how to activate? // Math.floor(Math.random()*pages.length)
}

cheers
12:42 pm on Mar 21, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4965
votes: 10


Try this:

function doPage() {
var pages = [page1, page2, page3],
randomnumber = Math.floor(Math.random() * pages.length);
pages[randomnumber]();
}

In that example, the pages array contains references to functions page1, page2, and page3. So doing:

pages[randomenumber]

is referring to one of those function references, and the () at the end will cause the function to execute.

Side note, avoid using "new Array()". Instead, just use the square bracket notation to create the array. This avoids the overhead of calling "new" and is slightly more compact. :)
6:35 pm on Mar 21, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts:112
votes: 0


Many thanks ! for explanation and comments as well as solution.
8:05 pm on Mar 21, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts:112
votes: 0


One small problem still.

I'm testing by clicking on a link:
<a href="#" onclick="doPage();")>readout test</a>.

So far, the link *never* works on the first click.
Second time, it sometimes shows an incomplete display, but mostly works correctly.
Third time, it always works.

It doesn't seem to be a loading problem. I've tried loading the script first (it's an AJAX load), and doing a setTimeout on loading the content it acts on; also tried incorporating the script into my main script file, not AJAXing it.

I don't fully understand 'initialisation', but could that be the problem?

cheers
11:20 pm on Mar 21, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4965
votes: 10


I suspect the problem lies elsewhere, and not with the bit of code relating to the random function call. Here's a quick test case:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<a href="#" onclick="doPage();")>readout test</a>.
<script>
function page1() {
alert('page1');
}
function page2() {
alert('page2');
}
function page3() {
alert('page3');
}
function doPage() {
var pages = [page1, page2, page3],
randomnumber = Math.floor(Math.random() * pages.length);
pages[randomnumber]();
}
</script>
</body>
</html>


That should at least demonstrate that this part is functioning.
1:13 am on Mar 22, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


<a href="#" onclick="doPage();return false;")>readout test</a>.

this will prevent browser trying to goto both PageN AND '#', may help, won't harm.
1:49 am on Mar 22, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4965
votes: 10


Yeah, I almost specified the return false bit as well, but since the href was "#" I left it out. :)
6:31 am on Mar 22, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts:112
votes: 0


I'd already tried "return false", hadn't mentioned it; also "javascript:/**/": no diff.

The test works fine first pop.

So the trouble may be because the functions each load three small text elements by AJAX ( with varying orders and setTimeouts) and after a short interval, removes them, by loading an empty version of the three elements.

I have tried waiting about ten seconds before clicking the link first time, but it doesn't make a difference either.

I'll try making these all part of the main page, and change the functions to use 'display'.

(I'm not up to speed on Firebug: just Firefox in private browsing mode, checking the error console).

Will report back....

Then, we may have to look at the actual code : )

cheers
10:52 am on Mar 22, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts:112
votes: 0


OK: the problem is definitely to do with AJAX/loading.

I've reworked the code so that all options are loaded as part of the main page, and made 'display:none'; and reworked the functions 'page1()' etc so that they do 'display:inline" on the appropriate options.

And that works, on the first click. I can live with that.

Question is, is anyone interested in exploring further what the AJAX version needs to make it fire? If so, I can post or send links.

cheers
12:59 pm on Mar 22, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4965
votes: 10


Sure, post up the code and we'll take a look. You might want to post it in a new thread, though.
4:14 pm on Mar 22, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts:112
votes: 0


No need: it was actually a d'oh problem.

I hadn't noticed that, in the process of testing, in the html I'd commented out the target <spans> into which the texts are loaded.

So the code ran, found nowhere to load, but ran the last part of the function, which reloads the target <spans>... ready for the second click.