javascript - How to get xmlhttprequest results in a for loop

Question

Good day all, Please i'm trying to get the latency values of a ping using xmlhttprequest in a for loop for five consecutive latencies that will be stored in an global array in a react native application, after which when the for loop finishes, other codes can now execute, but it seems that the whole code just runs through without getting the array values from the initial for loop and the final result comes out as 0, then later, I start getting the array values due to the result of the xmlhttprequest. How can I ensure that I get the latency results first before now executing the remaining code. My code is below:

let latencies = [];

class App extends Component {

 startScan = () => {
   this.setState({
     scanning: true,
   }); 

   this.getJitter();
 }

 getPing = () => {
  var request = new XMLHttpRequest();
  var startTime = new Date();
  request.open(
    'GET',
    'http://dummy.restapiexample.com/api/v1/employees',
    true,
  );
  request.send();

  request.onreadystatechange = (e) => {
  if (request.readyState == 4 && request.status == 200) {
    var endTime = new Date();
    var ping = endTime.getTime() - startTime.getTime();
    this.setState({ping: ping});
    latencies.push(ping);
    console.log('ping:', ping);
    console.log(latencies);
    return ping;
   }
  };
 };

 getJitter = () => {
   for(var i=0; i<5; i++){
     this.getPing();
   }

  //Get each latency difference
  var total1 = 0;
  for (var i = 0; i < latencies.lenght; i++) {
    if (typeof latencies[i] === 'number') {
      console.log(latencies[i]);
      total1 += latencies[i + 1] - latencies[i];
      console.log(total1);
    }
  }

  var jitter = total1 / (latencies.length - 1);
  console.log(jitter); //this comes out as 0
  latencies = [];
 };

   render() {
     return (
       ...
       <Button title="Scan" onPress={this.startScan} />
     )
   };
 }

Thanks

Tim

Answer 1

The problem is that the XMLHttpRequest is asynchronous and will allow other code to run while it is trying to fetch the resource. The solution to this is to await each request and then move on to the next block.

I've switched the XMLHttpRequest for the Fetch API. fetch returns a Promise which you can await and wait for it to finish.

class App extends Component {

  startScan = () => {
    this.setState({
      scanning: true,
    }); 

    this.getJitter().then(() => {
      this.setState({
        scanning: false,
      });
    });
  }

  getPing = async () => {
    const startTime = new Date();
    await fetch('http://dummy.restapiexample.com/api/v1/employees');
    const endTime = new Date();
    const ping = endTime.getTime() - startTime.getTime();
    this.setState({ ping });
    return ping;
  }

  getJitter = async () => {
    const latencies = [];
    for (let i = 0; i < 5; i++){
      const ping = await this.getPing();
      latencies.push(ping);
    }

    //Get each latency difference
    let total1 = 0;
    for (let i = 0; i < latencies.length; i++) {
      if (typeof latencies[i] === 'number') {
        console.log(latencies[i]);
        total1 += latencies[i + 1] - latencies[i];
        console.log(total1);
      }
    }

    const jitter = total1 / (latencies.length - 1);
    console.log(jitter); //this comes out as 0
  };

  render() {
    return (
      <Button title="Scan" onPress={this.startScan} />
    )
  }
}