在某些代码完成执行后延迟 $ajax 调用

Posted 2023-02-23

【中文标题】在某些代码完成执行后延迟 $ajax 调用

【英文标题】：Delaying $ajax calls after certain code completes executing

【发布时间】：2017-01-26 07:36:08

【问题描述】：

我正在尝试获取地理位置数据，然后将该数据合并到 $ajax 调用 URL 中。但是发生的情况是，两个 console.log(lat/lon) 调用都返回初始值 (0)。这意味着地理位置调用来不及返回，$ajax 调用只是使用默认值进行，如：http://api.openweathermap.org/data/2.5/weather?lat=0&lon=0&appid=9011468f93d0dac073b28cda9e83cd01"

var lat = 0;
var lon = 0;

console.log(lat);
console.log(lon);

if (navigator.geolocation) 
  navigator.geolocation.getCurrentPosition(function(pos)
    lat = pos.coords.latitude;
    lon = pos.coords.longitude;
  )


function getWeatherData() 
  console.log(lat);
  console.log(lon);
  setTimeout(function()
    $.ajax(
    url: "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&appid=9011468f93d0dac073b28cda9e83cd01",
    success: function (data) 
      console.log(data);

    ,
    error: function () 
      console.log("REKT");
    
  )
, 1000);


 $(document).ready(function () 
    getWeatherData();
  );

我通过在 $ajax 调用中添加任意超时函数来解决这个问题，但是如果调用需要超过 1000 或 10000 毫秒才能返回怎么办？ 所以，我的问题是有没有更优雅的解决方案，仅在地理定位代码完成执行时才调用 $ajax？

【参考方案1】：

将调用移至getCurrentPosition的回调

附加值：如果地理位置不存在，它不会调用 getWeatherData。现在你总是叫它

$(function()  
  if (navigator.geolocation) 
    navigator.geolocation.getCurrentPosition(function(pos) 
     lat = pos.coords.latitude; 
     lon = pos.coords.longitude; 
     getWeatherData(); 
   );
  
);

还有这个：https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only

【讨论】：

我选择这个作为答案仅仅是因为它是一个更加模块化的解决方案。我尝试编写一些代码只是为了仔细查看数据流：pastebin.com/1w2fiXz8 所以，即使“初始化...”首先触发，“成功！”仅在“启动 getWeatherData”后记录。我在编码方面有点新，但根据这个：回调函数被调用，直到它，好吧，回调（因此得名），其他代码继续执行。 “成功！”仅在函数回调时执行？总之，回调函数本质上是异步的？

它们是异步调用的结论。

【参考方案2】：

在navigator.geolocation.getCurrentPosition 中调用ajax 函数

var lat = 0;
var lon = 0;

function getWeatherData()

   if (navigator.geolocation) 

     navigator.geolocation.getCurrentPosition(function(pos)
        lat = pos.coords.latitude;
        lon = pos.coords.longitude;
    
        $.ajax(
          url: "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon +     "&appid=9011468f93d0dac073b28cda9e83cd01",
          success: function (data) 
            console.log(data);
          ,
          error: function () 
            console.log("REKT");
          
        );
    );
   
 
                                           

 $(document).ready(function () 
    getWeatherData();
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

但您会在 Google Chrome 中看到错误

getCurrentPosition() 和 watchPosition() 不再适用于不安全 起源。要使用此功能，您应该考虑切换您的 应用到安全源，例如 HTTPS

你可以在这里看到Google Insecure origins