/    Sign up×
Community /Pin to ProfileBookmark

Help with functions

Copy linkTweet thisAlerts:
Apr 19.2005

Hi for some reason when i call imagerefresh(theImgURL) the variable theImgURL does not get passed onto the next function.

does anyone know why?

[CODE]
<script language=”javascript”>
<!–
var updateImageTimerId;
var idx = 0;
function startRefresh(theImgURL){
updateImageTimerId = setInterval(“imagerefresh(theImgURL);”, 4000);
}
function imagerefresh(theImgURL){
clearInterval(updateImageTimerId);
idx ++;
if (idx <= 120){
var theDate = new Date();
var url = theImgURL;
url += “?dummy=”;
url += theDate.getTime().toString(10);
document.all.webcamImage.src=url;
}
}
startRefresh();
–>
</script>

[/CODE]

Im new to Javascript any help would be greatfull

to post a comment
JavaScript

37 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceApr 19.2005 — <i>
</i>updateImageTimerId = setInterval("imagerefresh('"+theImgURL+"')", 4000);
Copy linkTweet thisAlerts:
@KorApr 19.2005 — and

document.getElementsByName('webcamImage')[0].src=url;

or use id and getElementById(id) method.

to make it crossbrowser (document.all is an only IE reference)
Copy linkTweet thisAlerts:
@7studApr 19.2005 — <i>
</i>updateImageTimerId = setInterval("imagerefresh("+theImgURL+")", 4000);
[/QUOTE]
In what browser does that work? ? ?
Copy linkTweet thisAlerts:
@7studApr 19.2005 — Im new to Javascript any help would be greatfull[/QUOTE]
1) Don't mess around with setInterval() or setTimeout()

2) If you do, don't send any parameters to functions you are calling with setTimeout() or setInterval().

3) If you still insist, define the parameters as global variables, i.e. outside any functions. setTimeout() and setInterval() execute at global scope, so they can't "see" any function parameters; they can only 'see' stuff that is outside of any function. That should make some sense to you: the function where the setInterval() was created finishes executing before the timer goes off. When a function finishes executing all the variables in a function--including the function parameters--are destroyed. So, when the setInterval() timer goes off, the specified setInterval() function can't read the variables that were destroyed.

4) If you refuse to do that :mad:, there is a way to use setTimeout() and setInterval() without defining the parameters as global variables, but it involves forming what's called a 'closure', the explanation of which is an advanced js topic. This will work for your script:
function startRefresh(theImgURL){
function g(){imagerefresh(theImgURL)};
updateImageTimerId = setInterval(g, 4000);
}
Copy linkTweet thisAlerts:
@phpnoviceApr 19.2005 — In what browser does that work? ? ?[/QUOTE]
All browsers that have JavaScript enabled. ?
Copy linkTweet thisAlerts:
@7studApr 19.2005 — All browsers that have JavaScript enabled. ?[/QUOTE]
How does the setInterval() function call work when it goes looking for theImageURL and can't find any variable by that name?
Copy linkTweet thisAlerts:
@7studApr 19.2005 — Hi for some reason when i call imagerefresh(theImgURL) the variable theImgURL does not get passed onto the next function.

does anyone know why?[/quote]
I missed the first reason: you never even send a value for theImgURL to the first function:
startRefresh[COLOR=Red]()[/COLOR];
function startRefresh[color="red"](theImgURL)[/color]{
updateImageTimerId = setInterval("imagerefresh(theImgURL);", 4000);
}
Even if you did send a value for theImageURL to the outer function, and made the corrections phpnovice suggested, the setInterval() function still wouldn't be able to read it for the reasons I outlined in my other post.
Copy linkTweet thisAlerts:
@phpnoviceApr 19.2005 — How does the setInterval() function call work when it goes looking for theImageURL and can't find any variable by that name?[/QUOTE]
It is passed as an argument -- as I demonstrated. Works fine -- lasts a long time.
Copy linkTweet thisAlerts:
@phpnoviceApr 19.2005 — Even if you did send a value for theImageURL to the outer function, the setInterval() function still wouldn't be able to read it for the reasons I outlined in my other post.[/QUOTE]
Except you omitted the ability to pass the value as an argument to the asynchronous process. Which works just fine. :p
Copy linkTweet thisAlerts:
@phpnoviceApr 19.2005 — updateImageTimerId = setInterval("imagerefresh(theImgURL);", 4000);[/quote]
By the way... I corrected my original post. I left out the quotes for the string argument. Here is the correction again:
<i>
</i>updateImageTimerId = setInterval("imagerefresh('"+theImgURL+"')", 4000);

This works in all browsers that have JavaScript enabled.

As noted, though, you must make sure you have a valid variable value in the first place. ?
Copy linkTweet thisAlerts:
@phpnoviceApr 19.2005 — If you actually tried it in IE6 or FF1.0, you would at least know that it doesn't work. But, if you knew how a setTimeout() worked in the first place, you wouldn't even need to test it to know that your code

can't possibly work[/QUOTE]
Seems you're the one that hasn't tried it. ? I've been using it that way in IE and NN for six years -- and now Firefox, too. :p
Copy linkTweet thisAlerts:
@7studApr 19.2005 — It is passed as an argument -- as I demonstrated. Works fine -- lasts a long time.[/QUOTE]
So, you are saying, this works on your browser:
function g(value)
{
setInterval( "h(" + value + ")", 4000 );
}

function h(x)
{
alert(x);
}

g("hello");
Copy linkTweet thisAlerts:
@7studApr 19.2005 — As noted, though, you must make sure you have a valid variable value in the first place[/QUOTE]So, your solution won't work?
Copy linkTweet thisAlerts:
@7studApr 19.2005 — Seems you're the one that hasn't tried it. ? I've been using it that way in IE and NN for six years -- and now Firefox, too. :p[/QUOTE]I tested your solution in both IE6 and FF1.0, and it doesn't work. I don't know what to say. I guess we are at an impass: you say it works, I say it doesn't.
Copy linkTweet thisAlerts:
@7studApr 19.2005 — I see now, you are going back and editing your original post.
Copy linkTweet thisAlerts:
@phpnoviceApr 19.2005 — I see now, you are going back and editing your original post.[/QUOTE]
Only because of a typo. The original idea never changed and is perfectly sound.
Copy linkTweet thisAlerts:
@phpnoviceApr 19.2005 — So, your solution won't work?[/QUOTE]
The solution works in all browsers and has since the beginning of the JavaScript [b]setTimeout[/b] and [b]setInterval[/b] methods themselves. If bad data is supplied to the function in the first place, that does not mean the solution failed. Garbage In -- Garbage Out.
Copy linkTweet thisAlerts:
@phpnoviceApr 19.2005 — So, you are saying, this works on your browser:
function g(value)
{
setInterval( "h(" + value + ")", 4000 );
}

function h(x)
{
alert(x);
}

g("hello");[/QUOTE]
Yes, that works in all three of my browsers -- IE, NN, and Firefox -- as long as [b]value[/b] contains numeric data.

If it contains string data, then quotes are required.
Copy linkTweet thisAlerts:
@StOmPauthorApr 19.2005 — Hi,

Thank you for all your feedback it is helping me to learn...i have tryed all of your suggestions and i am still getting that the variable theImgURL is undefined.

this is the code i have got at the moment
[CODE]echo "
<script language="javascript">
<!--
var updateImageTimerId;
var idx = 0;
function startRefresh(theImgURL){
updateImageTimerId = setInterval("imagerefresh('"+theImgURL+"')", 4000);
}
function imagerefresh(theImgURL){
clearInterval(updateImageTimerId);
idx ++;
if (idx <= 120){
var theDate = new Date();
var url = theImgURL;
url += "?dummy=";
url += theDate.getTime().toString(10);
document.all.webcamImage.src=url;
}
}
startRefresh();
-->
</script>
";
[/CODE]

and this is how i am passing the variables

[CODE]
<img alt="Regatta Hotel Dance Floor Cam" id="webcamImage" onload="startRefresh('http://203.201.149.139/corodrv/corodrv.jpg');" src="http://203.201.149.139/corodrv/corodrv.jpg" vspace="5" hspace="5" border="0">
[/CODE]

Thanks heaps
Copy linkTweet thisAlerts:
@StOmPauthorApr 19.2005 — Im so confused now lol... :eek:
Copy linkTweet thisAlerts:
@phpnoviceApr 19.2005 — As was previously pointed out, this:

startRefresh();

is not passing an argument. Fix that.
Copy linkTweet thisAlerts:
@StOmPauthorApr 19.2005 — Thanks i must have completely overlooked that part!

It works perfectly with one image, But for some reason it dosent work with multiple images on a page...is this a really stupid question?
Copy linkTweet thisAlerts:
@7studApr 20.2005 — Yes, that works in all three of my browsers -- IE, NN, and Firefox -- as long as value contains numeric data.

If it contains string data, then quotes are required.[/QUOTE]
The original post contained a variable theImagURL which is clearly a string, and you insisted your solution worked. After I informed you several times that your solution didn't work in ANY browser, you went back and changed your original post. The solution I posted works, the solution you posted didn't. It's totally dishonest for you to claim otherwise, and anyone reading this thread can see you edited your post to correct the errors AFTER I pointed them out and AFTER you insisted there were no errors. If they look at the timestamp when you edited your original post and compare that to the timestamps on the other posts, it's readily apparent that you changed your post after you claimed it worked in all browsers and there weren't any errors.

Not to mention, your solution implicitly uses eval(). If you pass a string to setTimeout(), it is evaluated at execution time using eval(), which is inefficient. It's more efficient to pass a pointer to the function. I have to admit, I've never seen your syntax before, and I'm surprised that your final version worked, and I'm still trying to figure out why it does work, but the fact that you went back and edited your original post to change your solution speaks volumes about your integrity.
Copy linkTweet thisAlerts:
@phpnoviceApr 20.2005 — After I informed you several times that your solution didn't work in ANY browser...[/QUOTE]
Sour grapes. The reason you gave for my solution not working had NOTHING to do with string vs. numeric variables. You said it wouldn't work on principle. In other words, you said it wouldn't work because you cannot pass an argument using [b]setInterval[/b]. Well, I prooved you wrong on that score and now you're trying to weasel out of it by falsely claiming that what you were talking about all along was that it was a string argument and I had forgotten the quotes.

Sheesh! Talk about a lack of integrity! :rolleyes:

You go look at that original post I editted -- because of a typo -- and you'll find that there is a notation at the bottom of it explicitely stating that it was editted to correct a typo. There's no slight of hand here. I'm not trying to hide or cover anything up. [b][u][i]You[/i][/u][/b] are the one that is trying to do that! :p
Copy linkTweet thisAlerts:
@phpnoviceApr 20.2005 — Thanks i must have completely overlooked that part!

It works perfectly with one image, But for some reason it dosent work with multiple images on a page...is this a really stupid question?[/QUOTE]
To use it with multiple images, you just have to pass the correct argument(s) for each image. You can have multiple instances of that one function taking care of several images at the same time. I have done this before and it works perfectly in all browsers that have JavaScript enabled.

That is something that Mr. Neophyte, by the oh so laughable name of [b]7stud[/b], cannot handle quite so easily with his "global variable" method. Ha! ?
Copy linkTweet thisAlerts:
@StOmPauthorApr 20.2005 — How would i pass the correct arguments?
Copy linkTweet thisAlerts:
@phpnoviceApr 20.2005 — OK, you have this code:
<i>
</i>var updateImageTimerId;
var idx = 0;
function startRefresh(theImgURL){
updateImageTimerId = setInterval("imagerefresh(theImgURL);", 4000);
}
function imagerefresh(theImgURL){
clearInterval(updateImageTimerId);
idx ++;
if (idx &lt;= 120){
var theDate = new Date();
var url = theImgURL;
url += "?dummy=";
url += theDate.getTime().toString(10);
document.all.webcamImage.src=url;
}
}
startRefresh();

If [b]webcamImage[/b] is the [b]ID[/b] on an [b]IMG[/b] tag, then I would delete all of the above code and use the following in order to support multiple images:
<i>
</i>function refreshImage(imgURL, imgID, imgIDX){
if (++imgIDX &lt;= 120){
var url = imgURL + "?dummy=" + (new Date()).getTime().toString(10);
document.getElementById(imgID).src = url;
setTimeout("refreshImage('"+imgURL+"', '"+imgID+"', "+imgIDX+")", 4000);
}
}

Once you have that, you can start several images refreshing as follows:

refreshImage("webcam1.jpg", "webcamImage1", 0);

refreshImage("webcam2.jpg", "webcamImage2", 0);

refreshImage("webcam3.jpg", "webcamImage3", 0);

refreshImage("webcam4.jpg", "webcamImage4", 0);

According to your code, each of those will refresh 120 times and then stop. The first argument is the URL for where to find the image. The second argument is the [b]ID[/b] on the [b]IMG[/b] tag for where to display the image. The third argument provides a unique counter for each image that is refreshing.
Copy linkTweet thisAlerts:
@StOmPauthorApr 20.2005 — Well now that was alot mor efficient than i was originally trying to do! thanks alot...is there away where i can controll how fast it tryes to refresh?

e.g. refresh once every 5 seconds?

thank you so much
Copy linkTweet thisAlerts:
@phpnoviceApr 20.2005 — It currently refreshes every 4 seconds (4000 / 1000ms = 4sec), so just change that value. ?
Copy linkTweet thisAlerts:
@StOmPauthorApr 20.2005 — Legend!
Copy linkTweet thisAlerts:
@phpnoviceApr 20.2005 — Cheers.
Copy linkTweet thisAlerts:
@StOmPauthorApr 21.2005 — I have changed the value but it dosent seem to be doing anything

here is a url for you to view what i am trying to achieve:

[URL=http://www.clubeq.com/modules.php?name=Forums&file=viewtopic&t=4]http://www.clubeq.com/modules.php?name=Forums&file=viewtopic&t=4[/URL]

[URL=http://www.clubeq.com/modules.php?name=Forums&file=viewtopic&t=27]http://www.clubeq.com/modules.php?name=Forums&file=viewtopic&t=27[/URL]

It just seems to update instantly. i have changed the value and it still dosent seem change how long it waits till it updates the image. Any suggestions?
Copy linkTweet thisAlerts:
@phpnoviceApr 21.2005 — That is because you did this:
[code=html]
<img src="http://203.201.149.139/danceflr/danceflr.jpg"
alt="Regatta Hotel Dance Floor Cam" width="320" height="240" border="0" id="1"
onload="refreshImage('http://203.201.149.139/danceflr/danceflr.jpg', '1', '0');">
[/code]
That is going to start a new instance every time the image is refreshed. You need to do this:
[code=html]
<body onload="refreshImage('http://203.201.149.139/danceflr/danceflr.jpg', '1', '0');">

<img src="http://203.201.149.139/danceflr/danceflr.jpg"
alt="Regatta Hotel Dance Floor Cam" width="320" height="240" border="0" id="1">
[/code]
Copy linkTweet thisAlerts:
@StOmPauthorApr 21.2005 — then it wont work with multiple images
Copy linkTweet thisAlerts:
@phpnoviceApr 22.2005 — Heh, heh... Sure it will -- oh ye of little faith: ?

<body onload="

refreshImage('image1.jpg', 'img1', '0');

refreshImage('image2.jpg', 'img2', '0');

refreshImage('image3.jpg', 'img3', '0');

refreshImage('image4.jpg', 'img4', '0');

return true;">
Copy linkTweet thisAlerts:
@StOmPauthorApr 22.2005 — Your speedy replys and knowledge has been fantastic, let me know if i can do anything in return.
Copy linkTweet thisAlerts:
@phpnoviceApr 22.2005 — Cheers.
×

Success!

Help @StOmP spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...