函数循环中的函数

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();