Question

我想在处理内容时更改页面，但我的页面仅在流程结束时更新。我创建了这个简单的代码来显示问题。当我按下按钮时，它应该从页面中删除按钮并在处理等待功能时显示一条消息。但事实并非如此。它只隐藏了函数末尾的按钮。

<!DOCTYPE HTML>
<HTML>
    <HEAD>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        function getmybutton() {
            $('#mybutton').remove();
            $('#end').append('<p>button should be gone now!</p>' );
            wait(2000);
            $('#end').append('<h1>end of my test</h1>');
        }

        function wait(ms) {
            var start = new Date().getTime();
            var end = start;
            while (end < start + ms) {
                end = new Date().getTime();
            }
        }
    </script>
    </HEAD>
    <BODY>
        <h1>test
        </h1>
        <button id='mybutton' onclick="getmybutton()" type="submit">press my button</button>
        <div id="end">
        </div>
    </BODY>
</HTML>

Answer 1

您希望在这种情况下使用setTimeout()。

您的实现将阻止当前线程，setTimeout将等待在单独的线程中经过时间间隔后执行您的endOfTest。

第一个参数是您要执行的函数，第二个参数是ms中的时间，在此elapsed之后它将执行该函数。

<!DOCTYPE HTML>
<HTML>
    <HEAD>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        function getmybutton() {
            $('#mybutton').remove();
            $('#end').append('<p>button should be gone now!</p>' );

                      //Function, Time
            setTimeout(endOfTest, 2000);
        }

        function endOfTest() {
          $('#end').append('<h1>end of my test</h1>');
        }
    </script>
    </HEAD>
    <BODY>
        <h1>test
        </h1>
        <button id='mybutton' onclick="getmybutton()" type="submit">press my button</button>
        <div id="end">
        </div>
    </BODY>
</HTML>

javascript没有更新html页面

1 个答案: