全局变量更新 AJAX POST

Question

下面是我从头到尾的完整 JS 文件。 我在所有函数之外设置了一个“渲染”变量。 然后，由于在发出 POST 请求之前的 if 检查中需要它，因此我想将其用作标志并在发布请求完成后将其值更新为 true。 问题是所有 console.log 调用都会打印更改的值，但它不会持续存在。 当再次在 watchPosition function 中自动获取 position 坐标时，再次调用 calculateDistance function。 然后，之前保存的“window.rendered = true”的值就不存在了，它实际上是假的，它进入了if条件。 在另一个发布请求将此标志变量更改回false之前，如何实现不再发出发布请求的目标？

var rendered = false;
    
    function myfunc() {
        rendered = true;
        console.log(window.rendered);
    }
    
    function updatePosition() {
        if(navigator.geolocation) {
            navigator.geolocation.watchPosition(calculateDistance);
        }
        else {
            console.log("Geolocation is not supported by this browser.")
        }
    }
    
    function calculateDistance(position) {
        var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        var target = new google.maps.LatLng(55.85365783555865, -4.288739944549508);
        var dis = google.maps.geometry.spherical.computeDistanceBetween(pos, target);
        console.log(window.rendered);
        var self = this;
        if(dis <= 1000 && dis >= 0 && window.rendered == false) {
            console.log("Distance"+dis);
            var url = '/dogpark/near_park/';
            var csrftoken = getCookie('csrftoken');
            $.ajax({
                url: url,
                type: "POST",
                data: {
                    csrfmiddlewaretoken: csrftoken,
                    in_proximity : 1
                },
                async: false,
                success: function(data) {
                    myfunc();
                    self.rendered = true;
                    window.rendered = true;
                    alert(window.rendered);
                    window.location = '/dogpark/near_park/';
                },
                complete: function(data) {
                    console.log("Trying");
                    window.rendered = true;
                    alert(window.rendered);
                },
                error: function(xhr, errmsg, err) {
                    console.log(xhr.status+": "+xhr.responseText);
                },
                
            });
        }
    
    window.onload = updatePosition()

Answer 1

一个简单的方法是使用另一个变量来跟踪 ajax 调用完成。 这样您就不会进行另一个 Ajax 调用，直到前一个返回响应（成功/失败）。

var isWaitingForResponse = false;
...
function calculateDistance(position) {
  ...
  if(dis <= 1000 && dis >= 0 && window.rendered == false && !isWaitingForResponse) {
    isWaitingForResponse = true;
    ...
      success: function(data) {
        isWaitingForResponse = false
        ...
      },
      complete: function(data) {
        isWaitingForResponse = false
        ...
      },
      error: function(xhr, errmsg, err) {
        isWaitingForResponse = false
        ...
      }
...