在第一个函数完成时触发下一个函数

Question

我有以下javascript地理标记脚本：

window.onload = function(){
var x=document.getElementById("output");
getLocation();
function getLocation()
{
if (navigator.geolocation)
{
   navigator.geolocation.watchPosition(reverseGeoLookup);
}
else
{
   x.innerHTML="Geolocation is not supported by this browser.";
}
}
function reverseGeoLookup(position) {
console.log(position);
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var req = new XMLHttpRequest()
 req.open("GET", "http://maps.googleapis.com/maps/api/geocode    /json?latlng="+lat+","+lon+"&sensor=true", true)
req.onreadystatechange = function() {
  if(req.readyState == 4) {
      var result = JSON.parse(req.response).results
      for(var i = 0, length = result.length; i < length; i++) {
          for(var j = 0; j < result[i].address_components.length; j++) {
              var component = result[i].address_components[j]
              //console.log(component.long_name);
              if(~component.types.indexOf("postal_code")) {
                var out = document.getElementById('output');
                out.value = component.long_name;
                return false;
              }
          }
      }
   }
}
 req.send()
 }
 setTimeout(function(){
 var str = document.getElementById('output').value ;
 var res = str.substring(0,3);
document.getElementById("demo").innerHTML=res;
 },1000);
 setTimeout(function(){
 window.location = 'mylocationurl' +      document.getElementById('demo').innerHTML + '/' + 'index.html'
 },7000);
}

该代码获取用户位置，将其转换为英国邮政编码，然后将用户重定向到相应的页面。目前，该网站正在使用setTimeout来告诉浏览器何时重定向。我想改变这一点，以使事件按顺序发生，即。查找位置，然后在完成时缩短到前 3 位数字，然后在完成时重定向访问者。理想情况下，我宁愿不使用jQuery。有人可以帮助我吗？

提前感谢！

Answer 1

对不起...直到现在，我才想到要了解您需要什么...

所以。。。您需要一个在"getLocation"功能结束时触发的回调函数吗？

如果在完全加载 XMLHttpRequest 时调用回调函数，则需要在 XMLHttpRequest 对象的 OnreadyStateChange 属性中插入回调函数。举个例子：

function getLocation(){
    if (navigator.geolocation){
       navigator.geolocation.watchPosition(reverseGeoLookup(position,function(longName){
           console.log("function called, scope:",this,"args:",arguments);
           //callback function here
           //you can insert inside the callback the script inside "setTimeout"
           var res = longName.substring(0,3);
           document.getElementById("demo").innerHTML=res;
           //and after 7 sec. from the ajax request complete change page:
           setTimeout(function(){
                  window.location = 'mylocationurl' +      document.getElementById('demo').innerHTML + '/' + 'index.html'
           },7000);
       }));
    }else{
       x.innerHTML="Geolocation is not supported by this browser.";
}
window.onload = function(){
    var x=document.getElementById("output");
    getLocation();
}
function reverseGeoLookup(position,callback) {
    console.log(position);
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    var req = new XMLHttpRequest()
    req.open("GET", "http://maps.googleapis.com/maps/api/geocode    /json?latlng="+lat+","+lon+"&sensor=true", true)
    req.onreadystatechange = function() {
       if(req.readyState == 4) {
          var result = JSON.parse(req.response).results
          for(var i = 0, length = result.length; i < length; i++) {
              for(var j = 0; j < result[i].address_components.length; j++) {
                  var component = result[i].address_components[j]
                  //console.log(component.long_name);
                  if(~component.types.indexOf("postal_code")) {
                    var out = document.getElementById('output');
                    out.value = component.long_name;
                    //insert here the callback if you need to wait fully request load
                    //note the argument inside of callback become longName.
                    callback(component.long_name);
                   return false;
                  }
              }
          }
       }
     }
     req.send();
 }
}

我希望它能有所帮助

Answer 2

您可以使用

回调功能成功做到这一点。

    function getLocation(param, callback) {
      getLocation stuff
      callback();
    }