如何显示中间有延迟的两条消息

How do I display two messages with a delay in between?

本文关键字：两条 消息 延迟 中间 何显示 显示      更新时间：2023-09-26

当用户按下按钮时，我想显示两条消息，其中第二条消息比第一条消息晚几秒钟显示。在显示第二条消息时，应该保留第一条消息。下面是步骤。

  1. 用户按下按钮
  2. 消息1显示
  3. 等待几秒钟
  4. 消息1下显示消息2

我已经搜索了相当多，但没有建议是工作。我尝试了各种技术来访问消息元素上的属性以强制绘制它。然而，当在屏幕上留下第一条消息时，在延迟后显示第二条消息时，没有任何工作。有人可以解决这个工作的例子为IE 11?

下面的代码不能工作

<body>
    <div id="message1"></div>
    <div id="message2"></div>
    <script type="text/javascript">
        $('#message1').html("first");
        waitThreeSeconds();
        $('#message2').html("second");
    </script>
</body>

这段代码也不能用

<body>
    <div id="message1"></div>
    <div id="message2"></div>
    <script type="text/javascript">
        $('#message1').html("first");
        $('#message1').css('height', 'auto');
        $('#message1').height();
        waitThreeSeconds();
        $('#message2').html("second");
        $('#message2').css('height', 'auto');
        $('#message2').height();
    </script>
</body>

<body>
    <div id="message1"></div>
    <div id="message2"></div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#buttonid').on('click', function() {
                $('#message1').html("first");
                setTimeout(function(){
                    $('#message2').html("second");
                },3000); //second message will appear 3 seconds later
            });
        });
    </script>
</body>

提琴在这里:http://jsfiddle.net/fwgu1guf/

try 

<div id="message1"></div>
<script>
    $('#message1').html('first');
    setTimeout(function(){$('#message1').html('second')}, 3000);
</script>

相关文章：