AJAX POST请求修改的全局变量不持久 无法拦截重复请求如何解决

核心问题根因 #

你的AJAX请求成功回调中执行了window.location = '/dogpark/near_park/'触发页面跳转刷新，内存中存储的全局变量会全部重置，你设置的rendered = true自然会丢失，每次页面重新加载都会重新初始化rendered为false，这就是变量修改无法持久化的根本原因。

实现方案 #

改用浏览器localStorage存储标识，它可以跨页面刷新持久化留存，等你需要通过另一个POST请求重置标识时，删除对应的存储项即可。

修正后的完整代码 #

// 初始化优先从localStorage读标识，不存在则设为false
var rendered = localStorage.getItem('rendered') === 'true' ? true : false;
    
function myfunc() {
    rendered = true;
    localStorage.setItem('rendered', 'true');
    console.log(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(rendered);
    if(dis <= 1000 && dis >= 0 && 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();
                rendered = true;
                localStorage.setItem('rendered', 'true');
                alert(rendered);
                window.location = '/dogpark/near_park/';
            },
            complete: function(data) {
                console.log("Trying");
                rendered = true;
                localStorage.setItem('rendered', 'true');
                alert(rendered);
            },
            error: function(xhr, errmsg, err) {
                console.log(xhr.status+": "+xhr.responseText);
            },
            
        });
    }
}
// 修正原写法问题，不要加括号直接赋值函数引用
window.onload = updatePosition

重置标识的方法 #

当你另一个POST请求需要把标识改回false时，直接执行以下代码即可：

rendered = false;
localStorage.removeItem('rendered');

内容的提问来源于stack exchange，提问作者catBuddy