Databases
StackOverflow2013
Postsdbo
POFunction called by settimeout not ending
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFunction called by settimeout not ending
    text
    copied!<p>Problem: In a slide show the fade function below keeps calling the fadein/out functions, please JsFiddle and run for about ten seconds to see problem. Does not work in IE, don't let the jsfiddle run too long it'll probably crash your browser!</p> <p>JsFiddle: <a href="http://jsfiddle.net/HdYmH/" rel="nofollow">http://jsfiddle.net/HdYmH/</a></p> <p>Details (for those interested) : Hi, sorry for posting a question with such a large code chunk. I'm still learning javascript and was trying to figure out how to make a slideshow. I know there are a lot of js slideshows out there but I wanted to figure it out as a learning experience. So be warned there are parts of this code that are very bad. The problem is probably related to the slideshow's changeSlide() method.</p> <p>I used firebug to find out which method was being called the most apparently after a few seconds fadeOut will be called 20k+ times :|</p> <pre><code>// Generic fade function that fades in or out function fade(pElem, pStartOpac, pEndOpac, fps, sec) { if ((typeof (pElem) !== "string") || (typeof (pStartOpac) !== "number") || (typeof (pEndOpac) !== "number") || (typeof (fps) !== "number") || (typeof (sec) !== "number")) { console.log("Parameters incorrect format has to be (string) Element Id, (double) Starting Opacity, (double) End Opacity, (integer) frames per second, (integer) seconds to run"); return; } // The CSS opacity property only works from 1 to 0 if (pStartOpac &lt; 0) { pStartOpace = 0; } if (pStartOpac &gt; 1) { pStartOpac = 1; } if (pEndOpac &lt; 0) { pEndOpac = 0; } if (pEndOpac &gt; 1) { pEndOpac = 1; } // Stop the fps from going over 60 or under 1 (The eye will barely notice // improvements above 60fps and fractional fps are not supported) if (fps &gt; 60) { fps = 60; } if (fps &lt; 1) { fps = 1; } var totalFrames = (fps * sec); var opacityChangePerSecond = (Math.abs(pStartOpac - pEndOpac) / sec); var opacityChangePerFrame = (opacityChangePerSecond / fps); var timeOutInterval = 1000 * (1 / fps); // console.log("totalFrames: "+totalFrames); // console.log("Opacity change per second: " + opacityChangePerSecond); // console.log("Opacity change per frame: " + opacityChangePerFrame); // console.log("Time out interval: " + timeOutInterval + " milliseconds"); var opacity = pStartOpac; var timeoutVar; var elemId = document.getElementById(pElem); elemId.style.opacity = opacity; if (pStartOpac &lt; pEndOpac) { fadeIn(); return; } else { fadeOut(); return; } function fadeIn() { opacity = opacity + opacityChangePerFrame; if (opacity &gt; pEndOpac) { clearTimeout(timeoutVar); return; } elemId.style.opacity = opacity; timeoutVar = setTimeout(fadeIn, timeOutInterval); return; } function fadeOut() { if (opacity &lt; pEndOpac) { clearTimeout(timeoutVar); return; } opacity = opacity - opacityChangePerFrame; if (opacity &lt; 0) { opacity = 0; } elemId.style.opacity = opacity; timeoutVar = setTimeout(fadeOut, timeOutInterval); return; } } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload