在执行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