Javascript 功能循环中的功能

我需要每隔2秒将带有随机图像的PHP文件加载到

，并使用淡入淡出效果，所以我使用javascript和jQuery。我写函数来隐藏div，加载文件，然后显示它并等待2秒钟，然后它应该再次调用函数，但只发生了一次，然后它就停止了

以下是函数：

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

这样做：

(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

。

执行以下操作：

(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

。

尝试添加

setTimeout（random，2000）加载请求完成后：

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

尝试添加
setTimeout（随机，2000）加载请求完成后：

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

您遇到的问题是，您试图使用
.delay（）
替换本机的
setTimeout（）
，而这不是它的本意。
.delay（）
函数用于在jQuery动画效果之间添加暂停，而不是延迟另一个函数的执行，并且不接受回调函数。有关该函数，请参阅jQuery文档

正如前面的答案所述，您可以使用本机的
setInterval（）
函数来实现您所追求的延迟：

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

请注意，这将使
#randomage1
元素的动画恢复为完全不透明度，并设置再次调用函数的间隔，即使
.load（）
中的AJAX调用没有返回成功响应。如果这不是您想要的，您可以将代码移到一个匿名函数中，该函数作为
.load（）
上的成功回调传递，如下所示：

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

您遇到的问题是，您试图使用
.delay（）
替换本机的
setTimeout（）
，而这不是它的本意。
.delay（）
函数用于在jQuery动画效果之间添加暂停，而不是延迟另一个函数的执行，并且不接受回调函数。有关该函数，请参阅jQuery文档

正如前面的答案所述，您可以使用本机的
setInterval（）
函数来实现您所追求的延迟：

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

请注意，这将使
#randomage1
元素的动画恢复为完全不透明度，并设置再次调用函数的间隔，即使
.load（）
中的AJAX调用没有返回成功响应。如果这不是您想要的，您可以将代码移到一个匿名函数中，该函数作为
.load（）
上的成功回调传递，如下所示：

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

说“做这个”和发布代码是没有意义的-1直到你解释原因。@AnthonyGrist:继续做-1，我会像
那样评论，不过如果我看到你的答案，最好解释+1。向上投票会给人错误的印象，我认为答案是有用的。如果不解释原始方法的错误，提出问题的人不会学到任何东西；他们只会得到有效的代码。@AnthonyGrist:无可争辩，只要做你认为最好的事情，说“做这个”，发布代码就没有意义了-1直到你解释原因。@AnthonyGrist:继续做-1，我会像
那样评论，不过如果我看到你的答案，最好解释+1。向上投票会给人错误的印象，我认为答案是有用的。如果不解释原始方法的错误，提出问题的人不会学到任何东西；他们只是得到了有效的代码。@AnthonyGrist:无可争辩，只要做你认为最好的事情，+1在
的回调中正确淡出图像。
+1在
的回调中正确淡出图像。
的回调中正确淡出图像。
我希望你不会因为重复的答案而获得更多的选票（30分钟后发布）@Blaster我真的不介意我这样做，我认为失去代表是值得尝试改变的文化，即只发布代码就足够了。我同意你的观点，但也应该有一些耐心的文化，以便其他人有机会进一步解释他们的答案。你几乎总是看到答案的编辑，很难做到完美第一次尝试。您在后续编辑中添加了更多详细信息、示例、文档链接等。这将使您得出结论，只需发表一条评论，而不是像我在回答中对您的第一条评论所解释的那样投反对票。@Blaster但这种情况一直都在发生。答案只包括（无可否认是正确的）代码被广泛使用，因为它们的编写和发布速度要快得多，而且很多人似乎将“发布得最快”等同于“写得最好的答案”结果是，更深入的答案，提供关于提问者最初做错了什么，为什么这不是正确的方式等信息，被推到了页面的下一页，而不一定被看到。在我看来，最好的答案获得了更多的投票（“有时”不是这样），这是一个专业和“成熟”的社区allI之后的人我希望你不会因为重复的答案（30分钟后发布）而获得更多的选票@Blaster我真的不介意我这样做，我认为失去代表是值得尝试改变的文化，即只发布代码就足够了。我同意你的观点，但也应该有一些耐心的文化，以便其他人有机会进一步解释他们的答案。你几乎总是看到答案的编辑，很难做到完美