在執行ajax時localStorage問題

Question

我有一些簡單的代碼將運行以檢查Internet連接，我使用localStorage來保存變量值，但是當我運行它時，該變量的值不受影響。 那么，我該怎么做才能解決它。 請幫忙。 如果狀態更改為true則提交將發生，否則將被阻止。

localStorage.setItem("state","");

function checkConnection(){             
   $.ajax({
       url:"assets/ping.js",
       success:function(res){
            localStorage.setItem("state","true");
       },
       onerror:function(){
            localStorage.setItem("state","false");
       } 
   });
 }

$("form").submit(function(e){

   checkConnection();

   if(localStorage.getItem("state") == "false"){
        return false;
   } else if(localStorage.getItem("state") == "true") {
        return true;
   }

});

Answer 1

這是一個同步問題。 在提交表單之前，您的API調用檢查連接未完成。 您希望AJAX調用阻止，直到它得到響應。 （實際上我猜它應該被稱為SJAX for synchronous）。

您必須將async is false添加到settings參數。 閱讀： http ： //api.jquery.com/jQuery.ajax/#jQuery-ajax-settings

以下是使用jQuery執行此操作的方法：

$.ajax({
   url:"assets/ping.js",
   async: false
   success:function(res){
       localStorage.setItem("state", "true");
   },
   error: function(){
        localStorage.setItem("state","false");
   }           
});

還要注意的是，錯誤處理程序應該是在error不onerror 。

最后，如果您要做的就是檢測Internet連接是否丟失，您可以通過檢查window.navigator.onLine的值在大多數瀏覽器上執行此操作。 請參閱： http ： //www.whatwg.org/specs/web-apps/current-work/#browser-state