异步JavaScript回调

时间:2015-01-09 15:50:50

标签: javascript jquery asp.net asynchronous callback

我似乎无法理解这个问题。

我正在使用带有异步回调的Maxmind GeoIP2 JavaScript API来返回纬度,经度和细分或区域。

    <script type="text/javascript" src="//js.maxmind.com/js/apis/geoip2/v2.1/geoip2.js"></script>
    <!--Html tags ... -->
    <script type="text/javascript">
        geoip2.city(
            function (response) {
                var latitude = "";
                var longitude = "";
                var region = "";

                latitude = response.location.latitude;
                longitude = response.location.longitude;
                region = response.subdivisions[0].iso_code;

                //Other operations.                       
            },
            function (error) {
                try {
                    console.log(error);
                }
                catch (ex) {
                    alert(ex);
                }
            }
        );
    </script>
    <!--Html tags ... -->
    <script type="text/javascript">
        $(document).ready(function () {
            //Synchronous JavaScript against the DOM.
        });
    </script>

然后,这些值应该返回并在ASP.NET Web窗体更新面板中写入DOM,该面板会自动回发到服务器。然后,服务器在自定义数据库中进行查找,并将最近的50个左右位置作为点返回到Google Map,后者通过传递jQuery文档准备anon函数在回发时呈现。

当然,这不是发生的事情。一切都不会顺序发生。 (我不指望它,我只需要知道解决问题的正确方法。)

我想补充一些其他的东西:

  1. 在Maxmind从旧的同步更改之前工作 JavaScript API调用此异步回调API。
  2. 这不是我的代码或方法。我继承了这种美。

1 个答案:

答案 0 :(得分:0)

您只需将同步内容嵌套在任何异步回调中。异步编程的关键是记住JS中的函数只是对象,可以传递。

因此,您需要预先定义所有回调,然后将它们链接到另一个回调中。以下是作为示例(我假设您的数据库lookup是同步的)所以道歉,如果没有完全意义,但给出了如何执行异步位的想法。

将所有内容放在$(document.ready)内,而不是将其拆分为2个脚本:

$(document).ready(function () {

    var weHaveFailed = function(){
        // do sad things
    };

    var getLocation = function(successCallback, failureCallback){
      geoip2.city(
        function (response) {
          // success!! Unpack the response
          var latitude = response.location.latitude;
          var longitude = response.location.longitude;
          var region = response.subdivisions[0].iso_code;

          // ... do other stuff
          // then callback the passed in successCallback function with your coordinates
          // and the function we want to execute when THAT is successful
          successCallback(latitude, longitude, region, updateTheLocations);                   
        },
        function (error) {
          // failure :(
          console.log(error.message);
          failureCallback();
        }
      );

    var lookup = function(lat, long, reg, successCallback){
      var locations = [];
      // ...get the data from the database, is this sync?
      // ...assign the response to our locations array
      // ... and call the passed in successCallback with the locations array
      successCallback(locations);
    };

    var updateTheLocations = function(locations){
      // We pass in the locations from the lookup call
      // do happy things, like synchronous JavaScript against the DOM
    };

    // start the ball rolling, passing in the function we want to run when geoip2 gets the data
    getLocation(lookup, weHaveFailed);

});