Бесконечный цикл не работает

Question

Я думаю, что я довольно близко, чтобы заставить его работать, но все еще не могу понять, что не так с моим кодом. Мне нужно бесконечно запускать функцию для случайного обмена изображениями 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); 
     }); 
    }); 
} 

Answer 1

Проблема заключается в том, когда вы звоните SwitchImageLoop внутри функции SetTimeout. Ваш 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

Подумайте о своей ошибке, «слишком рекурсивной».

Ваша функция вызывает себя. Каждый раз, когда он называет себя, он использует немного больше памяти. Глубина рекурсии ограничена, чтобы вы не разбивали компьютер. Вы можете использовать цикл while, а не рекурсию для бесконечного цикла.

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

Answer 3

Я могу видеть, как SwitchImageLoop может работать в первый раз, когда image это строка. Во второй раз, однако, вы передаете ему элемент DOM. Интересно, что тогда возвращается document.getElementById. Я предлагаю вам удалить линию

image = document.getElementById(image); 

и использовать $("#" + image) вместо $ (изображение) в случае необходимости.