全局变量更新 AJAX POST

Posted 2023-03-05

【中文标题】全局变量更新 AJAX POST

【英文标题】：Global variable update 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 在它完成之前被调用，这可能会一遍又一遍地发生。

如何解决？

【参考方案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
        ...
      
...