函數循環中的函數

Question

我需要每2秒用隨機圖像加載PHP文件到<div>帶淡入淡出效果，所以我使用javascript和jQuery。我寫函數隱藏div，加載文件，而不是顯示它，等待2秒，然後它應該再次調用函數，但它只發生一次，然後停止。

下面是函數：

function random(){ 
    $("#randomImage1").animate({opacity: '0.0'}).load("../images/randomImage.php").animate({opacity: '1.0'}).delay(2000, function(){ 
    random(); 
}); 
random(); 

Answer 1

這樣做：

(function random(){ 
    var timer; 
    $("#randomImage1").animate({opacity: '0.0'}).load("../images/randomImage.php", function(){ 
    $(this).animate({opacity: '1'}); 
    timer = setTimeout(random, 2000); 
    }); 
})(); 

在這裏，我們創建自調用函數，並調用它裏面setTimeout這樣它就總是會一次又一次地叫你的圖像加載後動畫部分完成。一旦加載了所有圖像，您將需要撥打clearTimeout(timer)停止運行setTimeout。

Answer 2

嘗試load請求後加入setTimeout(random, 2000);完成：

function random(){ 
    var rndImg = $("#randomImage1"); 
    rndImg.fadeOut().load("../images/randomImage.php",function(){ 
     rndImg.fadeIn(); 
     setTimeout(random, 2000); 
    }); 
}; 
random() 

Answer 3

你的問題是，你正在嘗試使用.delay()作爲本地setTimeout()的替代品，這是不是它的意圖做。 .delay()函數用於在jQuery動畫效果之間添加暫停，而不是延遲另一個函數的執行，並且不接受回調函數。請參閱.delay()函數的jQuery文檔。

正如已經覆蓋以前的答案，您可以使用本機setInterval()函數來實現你的延遲之後：

function random(){ 
    $("#randomImage1").animate({opacity: '0.0'}).load("../images/randomImage.php").animate({opacity: '1.0'}); 
    setInterval(random, 2000); 
} 
random(); 

注意，這將#randomImage1元素動畫回到完全不透明，和即使來自​​的AJAX調用沒有返回成功響應，也要設置間隔以再次調用該函數。如果這不是你想要的，你可以移動而不是代碼到作爲成功回調傳遞一個匿名函數上​​，就像這樣：

function random(){ 
    $("#randomImage1").animate({opacity: '0.0'}).load("../images/randomImage.php", 
    function() { 
     $("#randomImage1").animate({opacity: '1.0'}); 
     setInterval(random, 2000) 
    }); 
} 
random();