HTML 显示图像，然后等待，然后显示另一个图像答案

【问题标题】：HTML show image, then wait, then show another imageHTML 显示图像，然后等待，然后显示另一个图像
【发布时间】：2012-08-15 12:41:45
【问题描述】：

我想要做的是，当用户选中一个单选框时，会显示一个图像，然后在 10 秒后显示一个 swf 文件。我有图像工作。我尝试在我的 html 函数中使用 php sleep，但是当页面加载时睡眠就开始了，请记住，所有这些都需要在 onlclick 函数中完成。我还尝试使用 javascript 函数从另一个 php 文件中获取内容。

<script type="text/javascript">
function doit()
{

  $.get("dumplings.php");
    return false; } 



</script>

Dumplings.php 休眠 10 秒，然后回显我的带有 swf 的 html。那也没用。

这是我的单选框

<input name="sample_check3" id="sample_check3" value="1" type="radio" onclick="showStuff('img');doit();"/>

【问题讨论】：

为什么不在 javascript 中使用 setTimeout 呢？无需让 PHP 脚本休眠 10 秒以等待交付，它只会占用资源。
你的意思是在获取php文件之前设置超时？那么在 php 文件中它会回显 html 吗？因为它现在要做的是获取 php 文件，然后 php 文件休眠并回显它，但如果它占用资源，它仍然没有工作
你能在 jsfiddle.net 上展示一个小演示吗

标签： php jquery html wait

【解决方案1】：

试试这个：

<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="json.json"></script>
<script>
$(document).ready(function () {
    $("#sample_check3").on('click', function(){
        if($(this).attr('checked') === 'checked'){
            $("#image1").css('display','');
            setTimeout(function(){
                $("#image1").css('display','none');
                $("#image2").css('display','');
            },3000);
        }
    });
}); 
</script>
</head>
<body>
<input name="sample_check3" id="sample_check3" value="1" type="radio"/>
<img id="image1" src="http://www.andrew.cmu.edu/user/nguesto/images/pikachu.jpg" style="display:none"/>
<img id="image2" src="http://faqsmedia.ign.com/faqs/image/ani004.gif" style="display:none"/>
</body>
</html>

【讨论】：

所以我会在 onclick 中调用 setTimeout()？
是的，点击时调用它，但请确保在调用 setTimeout 之前检查它是否已“检查”
好的，我不需要 setTimeout 的任何参数，因为它在函数中？
没错。 setTimeout 需要一个回调。在给定的示例中，回调是任意函数，但也可以是函数名。