无尽循环不起作用

Question

我想我已经很接近要开始工作了，但是仍然无法弄清楚我的代码出了什么问题。 我需要不停地运行一个函数，以通过大小为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);
        });
    });
}

Answer 1

问题是当您在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);
            });
        });
    }

Answer 2

我可以看到当image为字符串时， SwitchImageLoop可能在第一次工作。 但是，第二次将传递DOM元素。 我不知道然后会返回什么document.getElementById 。 我建议你删除行

image = document.getElementById(image);

并在适当的地方使用$("#" + image)代替$（image）。

Answer 3

考虑一下您的错误“太多递归”。

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

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