我試圖運行Javascript函數來檢查Internet連接狀態。如果用戶連接到互聯網，那麼我不想在屏幕上發生任何事情。但是，如果連接丟失，那麼我想顯示一個div。 （這個div將佔用整個屏幕（這將阻止用戶在後臺與頁面進行交互），直到連接重新建立，一旦連接重新建立，div應該自動消失，用戶應該能夠再次與屏幕上的按鈕進行交互。）如何處理同步ajax調用的結果並根據結果值顯示或隱藏div
爲了實現這一點，我有一個Javascript函數來檢查每秒運行的連接。它通過在PHP文件中使用AJAX帖子，PHP文件回顯「1」回到Javascript，如果函數接收到這個「1」，那麼它知道連接是活動的，如果它沒有收到它那麼它知道連接中斷，它應該顯示div。
該div被稱爲「openOfflineDIV」。
這是我的javascript：
function checkConnection() {
if($.ajax({
url: 'php_scripts/checkconnection.php',
type: "POST",
async: false
}).responseText == "1"){
console.log("Connection active");
openOfflineDIV.style.visibility = 'hidden';
}
else{
console.log("Connection lost");
openOfflineDIV.style.visibility = 'visible';
}
};
我的PHP文件：
<?php echo '1'; ?>
我的HTML頁面的相關部分：
//Head content (file containing 「checkConnection();」 is included here)
<body>
<script>
setInterval(function(){
checkConnection();
},1000);
</script>
//Body content here
//DIV to show when connectivity is lost:
<div id="openOfflineDIV" class="modalOfflineDIVDialog">
<div id="mfs">
<div id="wrapper">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" class="alerttextbig">You have been disconnected from the internet!</td>
</tr>
</table>
</div>
</div>
</div>
</body>
當我加載的頁面我看到控制檯每秒都會寫入「Connection active」。但是我也在控制檯中發現以下錯誤：
主線程上的同步XMLHttpRequest由於其對最終用戶體驗的不利影響而被棄用。欲瞭解更多幫助http://xhr.spec.whatwg.org/
看着它後，它似乎是因爲我在我的Javascript有async = false，但是當我刪除它，它仍然無法正常工作。
我在這裏看到的答案：How do I return the response from an asynchronous call? 我試圖改變我的代碼本實施頂端回答：
function checkConnection(result) {
if(result == "1"){
console.log("Connection active");
openOfflineDIV.style.visibility = 'hidden';
}
else{
console.log("Connection lost");
openOfflineDIV.style.visibility = 'visible';
}
}
foo(checkConnection);
function foo(callback){
$.ajax({
url: 'php_scripts/checkconnection.php',
type: "POST",
success: callback
});
}
這仍然不能正常工作，它不斷書寫「連接丟失」在控制檯中，這讓我認爲它可能不會等待從PHP文件返回的「1」。
我真的很感激任何人可以給我這個幫助，我試着實現我在這裏找到的答案，但到目前爲止一直不成功，先謝謝了！
UPDATE
這是使用@安地列斯的回答我當前的代碼：
function checkConnection() {
$.ajax({
url: 'php_scripts/checkconnection.php',
type: "POST",
success: function() {
$("#openOfflineDIV").hide();
console.log("connected"); },
error: function() {
$("#openOfflineDIV").show();
console.log("disconnected"); }
}).complete(function() {
setTimeout(checkConnection, 1000);
});
}
$(document).ready(checkConnection);
出於某種原因，當連接丟失的DIV沒有出現，但「斷開連接」並出現在控制檯每秒都會顯示，並且只要連接處於活動狀態，就會顯示「connected」。
更新2
這是另一種嘗試，以實現相同的結果：
function checkConnection() {
$.ajax({
url: 'php_scripts/checkconnection.php',
type: "POST",
success: function() {
document.getElementById('openOfflineDIV').style.display = 'none';
console.log("connected"); },
error: function() {
document.getElementById('openOfflineDIV').style.display = 'block';
//I have also tried: document.getElementById('openOfflineDIV').style.display = 'inline';
console.log("disconnected"); }
}).complete(function() {
setTimeout(checkConnection, 1000);
});
}
這種方法是成功的一半工作，這意味着如果我瀏覽到我的/#openOfflineDIV網頁地址添加到年底，那麼頁面將在屏幕上顯示div時加載，然後一旦函數開始運行（這意味着一旦它意識到連接處於活動狀態，函數將成功關閉div）後，該頁面會在一秒之後消失。
但該功能的第二部分不起作用，它不顯示互聯網連接丟失時的div。我試過inline和block方法，但都沒有工作。我很困惑，因爲函數是絕對能夠成功地隱藏div（我認爲這意味着我的定義div的語法是正確的）。
有什麼我在這裏失蹤？可能需要在頁面上添加一個額外的腳本或類似的東西來完成這項工作？
首先，您的主要問題問如何做到這一點同步，然後你問如何異步執行，並且在代碼中，您嘗試對異步代碼的處理是錯誤的，您在調用foo之後已經檢查了從foo中的ajax成功調用checkConnection的內部調用返回的結果 –