全局变量更新 AJAX POST答案

【问题标题】：Global variable update AJAX POST全局变量更新 AJAX POST
【发布时间】：2022-01-04 22:05:56
【问题描述】：

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

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()

【问题讨论】：

问题可能是网络调用不同步。 calculateDistance 在它完成之前被调用，这可能会一遍又一遍地发生。
如何解决？

标签： javascript html ajax post navigator

【解决方案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
        ...
      }
...

【讨论】：