如何使用 AJAX 输入 javascript 变量并在特定时间间隔更新 javascript 中的函数？

Question

这里我想通过获取值每三秒更新一次 init() 函数。我从另一个应用程序发送这些参数。我必须使用 AJAX 来更新定位点。那么现在该怎么做呢？我怎样才能从应用程序中获取值并在给定的时间间隔内更新位置？

<!DOCTYPE html>
<html>
<head>
<title>Track Page</title>
<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
</style>
</head>
<body>
<div id="map"></div>

    <script src="https://maps.googleapis.com/maps/api/js?key=(I pasted my java script embed API KEY here)&callback=initMap"
    async defer></script>

    <script>
    var marker;
    var u_lat,u_lng;
    function initMap() {
       var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: u_lat, lng: u_lng},
        zoom: 8
       });
       marker = new google.maps.Marker({
           map: map,
           draggable: true,
           animation: google.maps.Animation.DROP,
           title:'User',
           position: {lat: u_lat, lng: u_lng}
       });
       marker.addListener('click', toggleBounce);
    }
    function toggleBounce() {
      if (marker.getAnimation() !== null) {
        marker.setAnimation(null);
      } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
      }
    }
    </script>

</body>
</html>

编辑我可以这样写脚本吗

<script>
var http=new XMLHttpRequest();
var url="jsontext.txt";
var marker;
var user_lat,user_lng;
function initMap() {

   http.onreadystatechange = function(){
    if(http.readyState == 4 && http.status == 200){
        var coordinates=JSON.parse(http.responseText);
        user_lat=coordinates.latitude;
        user_lng=coordinates.longitude;
    }
   }
   http.open("GET",url,true);
   http.send();

   var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: user_lat, lng: user_lng},
    zoom: 8
   });
   marker = new google.maps.Marker({
       map: map,
       draggable: true,
       animation: google.maps.Animation.DROP,
   label:'Driver1',
       position: {lat: user_lat, lng: user_lng}
   });
}
</script>

Answer 1

您可以使用 setTimeout 和 clearTimeout 函数。

timer = setTimeout(function(){
    // Do the ajax call
}, 3000);

使用此功能，您可以为您的 ajax 呼叫设置超时并执行您需要的所有操作。

当您完成或发生错误或需要重置计时器或其他任何事情时...您可以使用 clearTimeout(timer) 来删除计时器。

* 编辑 *

这是您需要的工作流程：

初始化函数

init 函数创建一个计时器，该计时器对 returns 一个 JSON 格式的控制器进行 ajax 调用（参见 Controller）你可以继续努力。

示例：

$.ajax({
    url: 'my/url/to/action.php',
    type: 'POST', // Use always POST for security purposes
    data: {
        parameter1: value1,
        parameter2: value2,  // These are the parameters passed to the controller
        parameter3: value3,
    },
    dataType: 'json',
    complete: function (jqXHR, textStatus) {
        // something to do on ajax request completed
    },
    success: function (response) {
        // Refresh the marker with the values returned on the response
    },
    error: function (jqXhr, textStatus, errorThrown) {
        // something to do if the controller returns error
    }
});

控制器

这是后端部分，您需要一个 Web 服务，其中 returns 您需要的 JSON 格式的值。

你可以很容易地找到许多关于 google 的教程，例如如何对 PHP 控制器进行 ajax 调用......我希望这就是你正在寻找的对于

如何使用 AJAX 输入 javascript 变量并在特定时间间隔更新 javascript 中的函数？

How to take input to javascript variables using AJAX and update the function in javascript in specific intervals?

javascript

ajax

webpage