暫停的javascript腳本改變外觀

Question

我有以下腳本的命令：

posting();  
pause(time);  
postSent(postUrl, fields); 

function postSent(postUrl, fields) 
{ 
    $.ajax({          
    url : postUrl, 
    type : "POST", 
    data : fields, 
    cache : false, 
    error : function(xhr, textStatus, errorThrown) { 
     var answer = xhr.responseText;   
    answer = answer.split(":"); 
    answer = answer[0].replace(/}/g,"").replace(/{/g,"").replace(/"/g,""); 
    if (answer == "id") 
    { 
      isPostSent = true;    
    } 
    else 
    { 
     isPostSent = false;   
    }   

    }   
    }); 
} 

function pause(milliseconds) { 
var dt = new Date(); 
while ((new Date()) - dt <= milliseconds) { /* Do nothing */ } 
} 

function posting() 
{ 
var table = ''; 
table += '<table border="0" rules="none" cellpadding="5" style="z-index:+10; position:fixed; top:35%; left:35%; box-shadow: 0px 0px 5px 5px #888888;" rules="none" border="0" bgcolor="#edeff4">'; 
table += '<td align="center">'; 
table += '<img src="images/loading.gif" id="post_status_image">'; 
table += '</td>'; 
table += '<tr >'; 
table += '<td align="center">שולח הודעה, אנא המתן...</td>'; 
table += '</tr>'; 
table += '<tr>'; 
table += '<td align="center" id="post_status"></td>'; 
table += '</tr>'; 
table += '<tr >'; 
table += '<td align="center" ><img id="post_close" src="images/close1.png" onclick="closePop()" style="visibility:hidden;"></td>'; 
table += '</tr>'; 
table += '</table>'; 
document.getElementById('post').innerHTML = table; 
} 

時間設置爲3000毫秒。 我的問題是，我想張貼（）函數來顯示屏幕上的表格（它的一種「加載」屏幕），然後暫停腳本。 實際上，由於腳本第一次暫停的原因，只有當它完成後，纔會顯示加載屏幕...怎麼回事？

Answer 1

瀏覽器運行JavaScript和渲染都在一個線程。因此，所有三個JS函數都會在頁面更新之前完成。這就是爲什麼你應該從來沒有在基於while循環和檢查時間的JS中實現暫停功能。相反，您需要使用setTimeout()，並將您在傳遞給setTimeout()的回叫中暫停後需要運行的任何代碼。

使用您的示例代碼：

posting(); 
setTimeout(function() { 
    postSent(postUrl, fields); 
}, 3000); 

Answer 2

原生javascript中沒有睡眠或暫停功能。但我們可以這樣做。

function sleep(milliseconds) { 
    var start = new Date().getTime(); 
    for (var i = 0; i < 1e7; i++) { 
    if ((new Date().getTime() - start) > milliseconds){ 
     break; 
    } 
    } 
} 

我創建了小提琴：http://jsfiddle.net/6DQBP/

腳本取自：http://www.phpied.com/sleep-in-javascript/

我發現這個網址我回答後。可能有用。

• http://www.sean.co.uk/a/webdesign/javascriptdelay.shtm
• Sleep in Javascript - delay between actions