execute function right after xmlhttp.open and xmlhttp.send finished

Question

I'm using this function in onclick:

function showUser(str) {
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("txtHint").innerHTML = this.responseText;
        }
    };
    xmlhttp.open("GET","reseller.php?ostan="+str,true);
    xmlhttp.send();
    get_lat_lon()
  }
}

I need to call get_lat_lon() function right after previous works done, but get_lat_lon() starts it self before previous jobs complete.

I need to call get_lat_lon() without delay when I set 1s delay it works correctly.

UPDATE 1:

xmlhttp.open

and

xmlhttp.send

executed before my get_lat_lon() function,

question is how can I force my showUser() function to execute get_lat_lon() function after open and send finished?

Your php has nothing to do with this. The problem is that AJAX call (as the first 'A' in AJAX implies) are asynchronous, so when you call `get_fb()` in your code, it's almost impossible for the AJAX call to have returned already. EDIT: I was responding to OP's comment about the presence of the `php` tag. — Federico klez Culloca, Jan 24 '18 at 13:14
@AlirezaSabahi: Define "not working". If you want to perform some action after an asynchronous operation completes, that's exactly how you'd do it. — David, Jan 24 '18 at 13:30
@AlirezaSabahi: Your recent edit still has the exact same problem as the original question. You're trying to invoke an operation *immediately* instead of in response to the asynchronous operation. Just move `get_fb();` to where you want to execute it. In this case it would be in `onreadystatechange` immediately after updating the page with `responseText`. — David, Jan 24 '18 at 13:47

USER249 · Accepted Answer · 2018-01-24T20:40:29.290

2

You should call it like this:

 xmlhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
         document.getElementById("txtHint").innerHTML = this.responseText;
         get_fb();//  THIS
      }
   };

edited Jan 24 '18 at 20:40

answered Jan 24 '18 at 13:19

USER249

1,080
7
14

try calling "xmlhttp.open" before "xmlhttp.onreadystatechange" – USER249 Jan 24 '18 at 20:17
I edited my answer moving the function call to the end after adding the response html code.Try it now. – USER249 Jan 24 '18 at 20:46

score -2 · Answer 2 · answered Jan 24 '18 at 13:23

JavaScript implements an async function declaration. What you'd be looking for is something like this:

function showUser(user)
{
    // your logic
    get_fb_async();
}

async function get_fb_async()
{
    get_fb() = await showUser(user);
}

This will have to vary according to how your get_fb() function behaves, but now you have the logic.

Further details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

thanks, but doesn't work – Alireza Sabahi Jan 24 '18 at 13:26 — Alireza Sabahi, Jan 24 '18 at 13:26

execute function right after xmlhttp.open and xmlhttp.send finished

2 Answers2