javascript - 执行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)。

您必须将 async is false 添加到设置参数。阅读: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