Question

function duplicateCenter(center, email) {
    $.ajax({
        type: "POST",
        url: "../staff/staffDA.php",
        data: "funId=-4&center=" + center + "&email=" + email,
        success: function (data) {
            if (data.split('|')[0] === 'true') {
                alert('Duplicate Entry Found !!\r\n' + data.split('|')[1]);
                return false;
            }
            return true;
        }
    });
    return true;
}

function addCenterInfo() {
   /* some coding and initializations */

    if (!duplicateCenter(center, email)) {
        return;
    }

    alert('hi');
    alert('hi');

    /* more codes */
}

任何人请帮助我理解，为什么上面的功能是以相反的顺序执行的？

目前的执行顺序是

`hi`
`hi`
`Duplicate Entry Found !!`

预期执行只应为Duplicate Entry Found !!，并且应该从函数中发出。

Answer 1

duplicateCenter 包含 AJAX 代码异步

任何人都可以帮我理解，为什么上面的功能会以相反的顺序执行？ 代码正在使用正确的异步订单

有关AJAX的更多信息，请参阅以下答案：
How do I return the response from an asynchronous call?

可能的解决方案：使用回调

function duplicateCenter(center, email, callback) {
  $.ajax({
    type: "POST",
    url: "../staff/staffDA.php",
    data: "funId=-4&center=" + center + "&email=" + email,
    success: function(data) {
      var flag=false;
      if (data.split('|')[0] === 'true') {
        flag=true;
        alert('Duplicate Entry Found !!\r\n' + data.split('|')[1]);
      }
      if(typeof callback==='function') callback(flag);
    }
  });
}

function addCenterInfo() {
  /* some coding and initializations */
  duplicateCenter(center, email, function(isDuplicate) {
    if (isDuplicate) {
      alert('duplicate');
    } else {
      alert('not duplicate');
    }
  });
}

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

Answer 2

＆＃34; A＆＃34;在＆＃34; Ajax＆＃34;代表＆＃34;异步＆＃34;。您正在启动警报之前的duplicateCenter（）函数，但该函数将返回而不等待响应。当对staffDA.php的调用完成时，警报已经执行。

Answer 3

AJAX调用是异步的。这意味着你不知道什么时候会回来。这就是为什么你必须首先指定一个success函数：它只在AJAX调用返回时被调用，可能在不到一秒或多次。

因此，如果您只想在success方法运行后调用代码，则需要使代码看起来像这样：

function duplicateCenter(center, email) {
    $.ajax({
        type: "POST",
        url: "../staff/staffDA.php",
        data: "funId=-4&center=" + center + "&email=" + email,
        success: function (data) {
            if (data.split('|')[0] === 'true') {
                alert('Duplicate Entry Found !!\r\n' + data.split('|')[1]);
                itWasFalse();
            }
        }
    });
}

function itWasFalse() {
   // just en empty return? so lonely (and not needed - all JS functions return)
}

function moreCodes() {
    alert('hi');
    alert('hi');

    /* more codes */
}

function addCenterInfo() {
   /* some coding and initializations */
   duplicateCenter(center, email);
}

Answer 4

这是函数声明，它们的执行顺序取决于对这些函数的调用。

Answer 5

我在现有功能中添加了一行额外的代码，即

<强>异步：假

现在，它的工作方式与我预期的相同。

function duplicateCenter(center, email) {
flag=true;
    $.ajax({
        type: "POST",
        url: "../staff/staffDA.php",
        async:false,
        data: "funId=-4&center=" + center + "&email=" + email,
        success: function (data) {
            if (data.split('|')[0] === 'true') {
                alert('Duplicate Entry Found !!\r\n' + data.split('|')[1]);
                flag=false;
            }else{
               flag=true;
            }

        }
    });
    return flag;
}

参考： -

jQuery: Performing synchronous AJAX requests

javascript正以相反的顺序执行

5 个答案: