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

在setTimeout(random, 2000);请求完成后尝试添加load：

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元素设置为完全不透明度，并设置再次调用该函数的时间间隔，即使来自.load()的AJAX调用未返回成功响应。如果这不是您想要的，您可以将该代码移动到作为.load()上的成功回调传递的匿名函数中，如下所示：

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

功能循环功能

3 个答案: