Fatal编程技术网

javascript没有更新html页面

javascript jquery html

javascript没有更新html页面,javascript,jquery,html,Javascript,Jquery,Html,我想在处理某些内容时更改我的页面，但我的页面仅在处理过程结束时更新。 我创建了这个简单的代码来说明这个问题。 当我按下按钮时，它应该将按钮从页面中移除，并在处理等待功能时显示消息。但事实并非如此。它仅隐藏函数末尾的按钮 函数getmybutton（）{ $（“#mybutton”）.remove（）； $（“#结束”）.append（“按钮现在应该消失了！”）； 等待（2000年）； $（'#end'）。追加（'我的测试结束'）； } 函数等待（毫秒）{ var start=new Date

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


函数getmybutton（）{
$（“#mybutton”）.remove（）；
$（“#结束”）.append（“按钮现在应该消失了！
”）；
等待（2000年）；
$（'#end'）。追加（'我的测试结束'）；
}
函数等待（毫秒）{
var start=new Date（）.getTime（）；
var结束=开始；
同时（结束<开始+毫秒）{
end=新日期（）.getTime（）；
}
}
测试
按我的按钮
在这种情况下，您希望使用
setTimeout（）

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

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


<!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>




函数getmybutton（）{
$（“#mybutton”）.remove（）；
$（“#结束”）.append（“按钮现在应该消失了！
”）；
//功能、时间
setTimeout（endOfTest，2000年）；
}
函数endOfTest（）{
$（'#end'）。追加（'我的测试结束'）；
}
测试
按我的按钮

您正在阻止浏览器的渲染引擎。使用
setTimeout（）
javascript是“单线程”的，它将执行您的代码，直到找到合适的间隙来更新渲染
setTimeout
是异步的，即它不会阻塞线程。但是，while循环确实阻塞了线程。是的，setTimeout（）解决了这个问题。谢谢