我想我很接近让它工作,但仍然不能弄清楚我的代码有什么问题。我需要运行一个函数无休止地交换图像src随机通过一系列13或15个不同的图像,这取决于它们的大小。这个函数正在工作,但只有一次,它没有像我计划的那样无休止地运行,没有得到"太多递归"的浏览器错误。下面是代码:
function SwitchImageLoop(image, imageSize){
if(imageSize == '110x110'){var randomNumber = Math.floor(Math.random()*15) + 1};
if(imageSize == '247x110'){var randomNumber = Math.floor(Math.random()*13) + 1};
image = document.getElementById(image);
var randomTimer = Math.floor(Math.random() * 3000) + 1000;
FadeImages(image, imageSize, randomNumber);
var endlessLoop = setTimeout(function(){SwitchImageLoop(image, imageSize)}, randomTimer);
}
function FadeImages(image, imageSize, randomNumber){
$(image).fadeOut(300, function(){
$(image).attr('src', '/halcyonic/images/collage_' + imageSize + '_' + randomNumber + '.jpg').bind('onreadystatechange load', function(){
if(image.complete) $(image).fadeIn(300);
});
});
}
问题是当你在setTimeout函数内调用switchimagelloop时。你的SwitchImageLoop接受第一个参数为字符串(id),但下次你在setTimeout中调用你的函数时,你将传递一个文档对象作为第一个参数。
function SwitchImageLoop(image, imageSize){
if(imageSize == '110x110'){var randomNumber = Math.floor(Math.random()*15) + 1};
if(imageSize == '247x110'){var randomNumber = Math.floor(Math.random()*13) + 1};
下一个调用document.getElementById(documentObject)会给你错误
image = document.getElementById(image);
var randomTimer = Math.floor(Math.random() * 3000) + 1000;
FadeImages(image, imageSize, randomNumber);
var endlessLoop = setTimeout(function(){SwitchImageLoop(image, imageSize)}, randomTimer);
}
将函数重写为
function SwitchImageLoop(image, imageSize){
if(imageSize == '110x110'){var randomNumber = Math.floor(Math.random()*15) + 1};
if(imageSize == '247x110'){var randomNumber = Math.floor(Math.random()*13) + 1};
var randomTimer = Math.floor(Math.random() * 3000) + 1000;
FadeImages(image, imageSize, randomNumber);
var endlessLoop = setTimeout(function(){SwitchImageLoop(image, imageSize)}, randomTimer);
}
function FadeImages(image, imageSize, randomNumber){
image=document.getElementById(image);
$(image).fadeOut(300, function(){
$(image).attr('src', '/halcyonic/images/collage_' + imageSize + '_' + randomNumber + '.jpg').bind('onreadystatechange load', function(){
if(image.complete) $(image).fadeIn(300);
});
});
}
当image
是字符串时,我可以看到SwitchImageLoop
如何第一次工作。然而,第二次将向它传递一个DOM元素。我想知道document.getElementById
返回什么。我建议你去掉
image = document.getElementById(image);
$("#" + image)
代替$(image)。想想你的错误,"太多递归"。
你的函数正在调用它自己。每次调用它自己时,它都会使用更多的内存。递归深度是有上限的,这样就不会使计算机崩溃。对于无限循环,您可能希望使用while循环而不是递归。
http://www.w3schools.com/js/js_loop_while.asp