/    Sign up×
Community /Pin to ProfileBookmark

feedback needed for setting interval glitch

Copy linkTweet thisAlerts:
Oct 27.2007

😡

i’m stumped as to why the following code performs properly fading out, but when the opacity reaches 0 the browser refreshes the image to full opacity and does a quick, unwanted additional 10-second fade out before it fades in properly. it feels as if there’s a mis-match between the setInterval time and the interval used inside my function.

[U]the function:[/U]

[INDENT]var direction = “down”;
var tIncrement = 90;

function fader() {
var theImg = document.getElementById(“mainImg”);
if (direction == “down”) {
tIncrement–;
} else if (direction == “up”) {
tIncrement++;
}
if (tIncrement < 100 && tIncrement > 0)
theImg.setAttribute(“style”, “opacity: .” + tIncrement);
else
theImg.setAttribute(“style”, “opacity: ” + tIncrement);
if (tIncrement < 1/100) direction = “up”;
else if (theImg.style.opacity > 1-1/100) direction = “down”;
};

[/INDENT]

[U]the call:[/U]

[INDENT]<body onload=”setInterval(‘fader()’, 100);”>[/INDENT]

_______________________

any help would be enormously appreciated.

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@mrhooOct 27.2007 — Unless you have a reference to the setInterval and call

clearInterval(reference) at some point, it will be called 10 times a second, forever.
Copy linkTweet thisAlerts:
@VortexLipauthorOct 27.2007 — i'm grateful for your input.

i explicitly handled the references to the interval and whittled down the script to test the bug in one direction:

[U]the function:[/U]

[INDENT]var direction = "down";

var tIncrement = 0;

function fader() {
var theImg = document.getElementById("mainImg");
tIncrement++;
if (tIncrement < 101 && tIncrement > 0)
theImg.setAttribute("style", "opacity: ." + tIncrement);
else
endFade();
}[/INDENT]

[U]the reference handlers:[/U]

[INDENT]function startFade()

{

intervalID = setInterval("fader()", 250);

}

function endFade()
{
clearInterval(intervalID);

}[/INDENT]

[U]the call:[/U]

[INDENT]<body onload="startFade();">[/INDENT]

i still get a pre-emptive quick fade (actually 5 seconds in duration) before it works correctly. and it does work correctly, eventually...

could calling two javascript functions in the body on load event (one being the fader) cause an anomaly in an interval function, e.g.

[INDENT]<body onLoad="doFader(); doSomethingElse();">[/INDENT]
Copy linkTweet thisAlerts:
@mrhooOct 27.2007 — In your comparisons, use parseFloat(theImg.style.opacity)
×

Success!

Help @VortexLip 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 5.22,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...