在页面重定向后调用异步成功函数

Question

在ajax get请求返回结果后调用此函数

function handleLogin() {
    if ($("#imalogin").length) {
        alert("Your login has expired, please log back in");
        window.location.replace("login.aspx");
    }
}

这是一个调用它的函数

function addEstablishments() {
    $.get(encodeURI("addEstablishment.aspx?locationCode=" + $('#locationCode').val()), function (data) {
        $("#dbCheck").html(data);
        handleLogin();
    }).done(function (){
        if ($("#duplicateEstablishment").length) {
            $("#locationCodeError").html("Location code already used")
        }
        else {
            alert("Location added");
            getEstablishments();
            hideLocationForm();
        }
    }).fail(function () { 
        alert("Failed to add location. Please try again in a few seconds"); 
        $("#locationAddressError").html("Could not confirm address"); 
    });
}

我会“期望”handleLogin在其内部显示警报，然后立即重定向，其余代码将不会执行。但这是javascript的一个奇怪的土地，所以.done addEstablishments事件中的警报也会在重定向之前触发，因此人们会收到一条消息，表示它已经添加，但是它们已经添加了被重定向到登录页面，登录并发现它从未被添加。所以有一些我不知道的晦涩的javascript规则，或者这是因为我不能在{I}中调用handleLogin，需要在.done中调用它？

Answer 1

location.replace启动异步过程

JavaScript是单线程的，而不是多线程的，因此它只能顺序（或同步）处理语句。与此处的一些注释相反，这意味着两个回调不能同时执行。一个是先执行，另一个是第二个执行。

问题在于，通过进行位置分配，JavaScript在浏览器中启动了异步过程。 浏览器现在正在处理位置分配：在重定向到新位置之前发出HTTP请求并等待服务器响应。

同时，JavaScript线程可以继续执行下一个回调。因此，第二个警报可以在浏览器完成页面重定向之前显示。

在第一次回调中有条件地定义.done()

要在第一个成功处理程序中重定向页面而不执行辅助done()处理程序，请在第一个处理程序中有条件地定义它。

＆＃13;

＆＃13;

function handleLogin() {
 if ($("#imalogin").length) {
   alert("Your login has expired, please log back in");
   
   // async process initiated
   window.location.replace("login.aspx");
   
   // this returns true before the async location redirect completes
   return true; 
 } else {
   return false;
 }
}

$.get('http://jsonplaceholder.typicode.com/posts/1', function(data, status, jqxhr) {
  $("#dbCheck").html(JSON.stringify(data));
  
  // If handleLogin returns false…
  if(!handleLogin()) {
    
    // …assign second success handler.
    // (This never gets assigned if handleLogin returns true.)
    jqxhr.done(function(data) { 
      alert('second success');
    });
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="imalogin" disabled /><br />
<code id="dbCheck"></code>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你需要查看jquery文档，你通过了

function (data) {
    $("#dbCheck").html(data);
    handleLogin();
}

作为$ .get第二个参数，所以它在ajax成功时被调用，并且你再次使用了带有另一个函数的done函数作为它的参数。

这是来自jquery文档：

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
  var jqxhr = $.get( "example.php", function() {
    alert( "success" );
  })
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });