[英]Function called by settimeout not ending
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. 问题:在幻灯片中,下面的淡入淡出功能不断调用淡入/淡出功能,请使用JsFiddle并运行约十秒钟以查看问题。 Does not work in IE, don't let the jsfiddle run too long it'll probably crash your browser!
在IE中不起作用,请不要让jsfiddle运行太长时间,否则可能会导致浏览器崩溃!
JsFiddle: http://jsfiddle.net/HdYmH/ JsFiddle: http : //jsfiddle.net/HdYmH/
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.
我仍在学习JavaScript,并试图弄清楚如何制作幻灯片。 I know there are a lot of js slideshows out there but I wanted to figure it out as a learning experience.
我知道那里有很多js幻灯片,但我想把它当作学习经验。 So be warned there are parts of this code that are very bad.
因此请注意,此代码的某些部分非常糟糕。 The problem is probably related to the slideshow's changeSlide() method.
问题可能与幻灯片的changeSlide()方法有关。
I used firebug to find out which method was being called the most apparently after a few seconds fadeOut will be called 20k+ times :| 我用firebug找出了最明显的方法,在淡出几秒钟后,fadeOut将被调用20k次以上:
// 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 < 0) {
pStartOpace = 0;
}
if (pStartOpac > 1) {
pStartOpac = 1;
}
if (pEndOpac < 0) {
pEndOpac = 0;
}
if (pEndOpac > 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 > 60) {
fps = 60;
}
if (fps < 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 < pEndOpac) {
fadeIn();
return;
} else {
fadeOut();
return;
}
function fadeIn() {
opacity = opacity + opacityChangePerFrame;
if (opacity > pEndOpac) {
clearTimeout(timeoutVar);
return;
}
elemId.style.opacity = opacity;
timeoutVar = setTimeout(fadeIn, timeOutInterval);
return;
}
function fadeOut() {
if (opacity < pEndOpac) {
clearTimeout(timeoutVar);
return;
}
opacity = opacity - opacityChangePerFrame;
if (opacity < 0) {
opacity = 0;
}
elemId.style.opacity = opacity;
timeoutVar = setTimeout(fadeOut, timeOutInterval);
return;
}
}
Got the problem: when opacity gets <0 you set it to 0, and then do: if (opacity < pEndOpac)
. 遇到问题:当不透明度小于0时,将其设置为0,然后执行:
if (opacity < pEndOpac)
。 pEndOpac is 0 so, 0<0 evaluates to false and timeout is never cleared. pEndOpac为0,因此0 <0的计算结果为false,并且永不清除超时。 The solution is to do
if (opacity <= pEndOpac)
: 解决方案是执行
if (opacity <= pEndOpac)
:
function fadeIn() {
opacity = opacity + opacityChangePerFrame;
if (opacity >= pEndOpac) {
clearTimeout(timeoutVar);
return;
}
elemId.style.opacity = opacity;
timeoutVar = setTimeout(fadeIn, timeOutInterval);
return;
}
function fadeOut() {
if (opacity <= pEndOpac) {
clearTimeout(timeoutVar);
return;
}
opacity = opacity - opacityChangePerFrame;
if (opacity < 0) {
opacity = 0;
}
elemId.style.opacity = opacity;
timeoutVar = setTimeout(fadeOut, timeOutInterval);
return;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.