settimeout调用的函数未结束
Function called by settimeout not ending
问题:在幻灯片中,下面的fade函数一直在调用fadin/out函数,请JsFiddle并运行大约十秒钟以查看问题。在IE中不起作用,不要让jsfiddle运行太久,它可能会使你的浏览器崩溃!
Js报价:http://jsfiddle.net/HdYmH/
详细信息(对于那些感兴趣的人):嗨,很抱歉发布了一个有这么大代码块的问题。我还在学习javascript,并试图弄清楚如何制作幻灯片。我知道有很多js幻灯片,但我想把它作为一种学习体验。因此,请注意,此代码的某些部分非常糟糕。这个问题可能与幻灯片的changeSlide()方法有关。
我使用firebug来找出哪种方法在几秒钟后被调用得最明显。out将被调用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;
}
}
遇到问题:当不透明度变得<0将其设置为0,然后执行:if (opacity < pEndOpac)
。pEndOpac为0,因此0<0的计算结果为false,并且从不清除超时。解决方案是做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;
}
相关文章:
- Jquery未定义函数正在停止其他操作
- 在不破坏未定义函数的情况下,对多个视图使用单个js文件
- Promise函数在.then之后未运行函数化
- settimeout调用的函数未结束
- 如何对jquery中的未命名函数执行.call()
- Eval未声明函数
- Node Express Handlebars帮助程序未返回函数的结果
- Uncaught ReferenceError:尝试在Android网络视图中访问时未定义函数
- javascript中的命名函数与未命名函数以及理解分配
- jQuery文件上传和验证未定义函数
- 引用错误:未定义函数-Firefox
- res.render中出错,未定义函数
- 神秘的未定义函数
- JavaScript未启动函数
- 即使未调用函数keyup,也会执行该函数
- 尝试使用函数和Ajax修改值时未定义函数
- 引用错误:未定义函数
- ReferenceError:未定义函数
- 在 Angular JS 中使用 ng-include 的未定义函数
- 未捕获的引用错误:未定义函数