Javascript 回调 - 以错误的顺序执行

Question

我正在写一个上传文件的脚本。我想在上传之前检查文件是否存在，然后最终会为用户提供一个覆盖选项。

我已将代码从正常流程中删除，以确保没有其他问题影响它。

我将文件名传递给函数，该函数将使用 ajax 运行 php 脚本并返回结果。

我希望这个结果在回调中返回，并继续处理。

我添加了显示我希望它们触发的顺序 (1,2,3) 的警报，但它们以不同的顺序触发 (1,3,2)

请帮忙。

      function Test() {              
        FileExists("Faces.png", function() {
            alert("3");
          });
      }

      function FileExists(Filename, callback)
      {
        var res;   
        var Obj = new Object();

        Obj.function = 'FileExists';
        Obj.Filename = Filename;

        alert("1");

        $.ajax({
            url: "upload.php",
            dataType: "text", 
            type: "POST",
            data: Obj,
            cache: false,
            success: function (data) {
               alert("2"); 

               if (data == "1")
                   res = true;
               else
                   res = false;
            },
            error: function (xhr, ajaxOptions, thrownError) {
                 alert(xhr.status);
                 alert(thrownError);
                 res= false;
            }
        });

        if(callback) callback(res);
      }

Answer 1

您的回调需要在成功和错误函数中执行:

//Initialize callback with an empty function if not provided
callback = callback || function() {};

$.ajax({
        url: "upload.php",
        dataType: "text", 
        type: "POST",
        data: Obj,
        cache: false,
        success: function (data) {
           alert("2"); 

           if (data == "1")
               callback(true);
           else
               callback(false);
        },
        error: function (xhr, ajaxOptions, thrownError) {
             alert(xhr.status);
             alert(thrownError);
             callback(false);
        }
    });

目前的执行方式如下:

1. FileExists 被调用。
2. alert(1) 被调用。
3. Ajax 请求被触发(这是异步发生的)。 $.ajax 会立即返回，但请求会排队，最终由浏览器执行。
4. callback 被检查，如果它存在，它被调用 res 在这一点上是未定义的。
5. Ajax 请求已完成。调用 success 或 error 函数，然后将 res 设置为 true 或 false(它们没有任何反应，因为您的函数已经返回)。