javascript - Why is this function not waiting until it has data from XHR request? -
when call getcurrentconditions tries return data before requestdata has completed , therefore doesn't find data.currently. definately getting data returned url, have tried adding timeout loop wait xhr load, broke script together. kind of confused why second function not waiting this.requestdata(latitude, longitude); finish before continuing.
this.requestdata = function(latitude, longitude) { request_url = self.api_endpoint + api_key + '/' + latitude + ',' + longitude + '?units=auto'; var xhr = new xmlhttprequest(); xhr.onreadystatechange = function() { if(xhr.readystate==4 && xhr.status==200) { content = xhr.responsetext; if(content != '' && (content)) { return json.parse(content); } else { return false; } } } xhr.open('get', 'proxy.php?url='+request_url, true); xhr.send(null); } /** * return current conditions * * @param float $latitude * @param float $longitude * @return \forecastioconditions|boolean */ this.getcurrentconditions = function(latitude, longitude) { data = this.requestdata(latitude, longitude); if(data !== false) { return new forecastioconditions(data.currently); } else { return false; } } var forecast = new forecastio(api_key); var condition = forecast.getcurrentconditions(latitude, longitude);
because ajax asynchronous, means once request sent continue executing without waiting response.
one easy solution turn off asynchronous nature passing 3rd parameter .open() method false, has drawbacks browser thread blocked till request completed means ui remain unresponsive till request completed.
xhr.open('get', 'proxy.php?url='+request_url, false);
the correct solution use callback method
this.requestdata = function(latitude, longitude, callback) { request_url = self.api_endpoint + api_key + '/' + latitude + ',' + longitude + '?units=auto'; var xhr = new xmlhttprequest(); xhr.onreadystatechange = function() { if(xhr.readystate==4 && xhr.status==200) { content = xhr.responsetext; if(content != '' && (content)) { callback(json.parse(content)); } else { callback(false); } } } xhr.open('get', 'proxy.php?url='+request_url, true); xhr.send(null); } /** * return current conditions * * @param float $latitude * @param float $longitude * @return \forecastioconditions|boolean */ this.getcurrentconditions = function(latitude, longitude, callback) { this.requestdata(latitude, longitude, function(data) { if(data !== false) { callback(forecastioconditions(data.currently)); } else { callback(false); } }); } var forecast = new forecastio(api_key); forecast.getcurrentconditions(latitude, longitude, function(condition){ if(condition !== false) { } else { } });
Comments
Post a Comment