0

我想我已经很接近让它工作了，但仍然无法弄清楚我的代码有什么问题。我需要无休止地运行一个函数，通过一系列 13 或 15 个不同的图像随机交换图像 src，具体取决于它们的大小。此功能正在运行，但只是一次，它并没有像我计划的那样无休止地运行，而不会出现“太多递归”浏览器错误。这是代码：

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);
        });
    });
}
4

3 回答 3

3

问题是当您在 setTimeout 函数中调用 SwitchImageLoop 时。您的 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);
            });
        });
    }
于 2013-06-04T02:16:57.283 回答
1

我可以看到SwitchImageLoop第一次image是字符串时如何工作。然而，第二次，您将一个 DOM 元素传递给它。我想知道document.getElementById然后返回什么。我建议你删除线

image = document.getElementById(image);

并在适当的地方使用$("#" + image)而不是 $(image)。

于 2013-06-04T02:18:01.743 回答
0

想想你的错误，“递归太多”。

您的函数正在调用自己。每次它调用自己时，它都会使用更多的内存。递归深度是有上限的，这样您就不会崩溃您的计算机。您可能希望使用 while 循环而不是递归来实现无限循环。

http://www.w3schools.com/js/js_loop_while.asp

于 2013-06-04T02:14:58.480 回答