Javascript callback - executing in wrong order

Question

I am writing a script which is to upload files. I want to check if the file exists before the upload takes place, and then ultimatly will offer the user an overwrite option.

I have taken the code out of the normal flow to make sure another issue wasn't effecting it.

I am passing the filename to the function, which will use ajax to run a php script and return the result.

I want this result to return in the callback, and continue processing.

I have added alerts which show the order in which I expect them to fire (1,2,3), but they are firing in a different order (1,3,2)

Please help.

      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);
      }

Blue · Accepted Answer · 2017-06-27 23:05:55Z

Your callbacks need to be executed in the success and error functions:

//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);
        }
    });

The way execution currently works, is as follows:

FileExists is called.
alert(1) is called.
Ajax request is fired (This happens asynchronously). $.ajax will return immediately, but the request is queued up, and ultimately executed by the browser.
callback is checked, and if it exists, it's called with res which at this point is undefined.
Ajax request is complete. Either success or error function is called, res is then set to true or false (And nothing happens with them, as your function has already returned).

Collectives™ on Stack Overflow

Javascript callback - executing in wrong order

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related