javascript不更新html頁面

-2

我想在處理某些內容時更改我的頁面，但我的頁面僅在過程結束時更新。我創建了這個簡單的代碼來顯示問題。當我按下按鈕時，它應該從頁面中移除按鈕，並在處理等待功能時顯示一條消息。但事實並非如此。它只隱藏函數結尾處的按鈕。javascript不更新html頁面

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

來源

2016-02-29 Flavio Ferreira

您正在阻止瀏覽器的渲染引擎。使用'setTimeout（）' –

javascript適用於所有意圖和目的'單線程'，並將執行您的代碼，直到找到合適的間隔來更新呈現。 'setTimeout'是異步的，即它不支持線程。然而，你的while循環確實阻塞了線程。 – dewd

是的，setTimeout（）解決了這個問題。謝謝 –

你想在這種情況下使用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>

來源

2016-02-29 20:29:53

是的，這工作。謝謝一堆。 –

javascript不更新html頁面

回答

相關問題