Javascript 重新加载 Div 冲突

Question

我想通过 JavaScript 刷新 div。我可以处理它，但我的结构比这更复杂。

如果用户单击按钮，则会出现一个新的 div。之后，该 div 应该每 3 秒重新加载一次。这些部分没问题。问题是当用户单击另一个按钮时系统会重新加载旧的 div。例如。用户首先单击按钮 Nr 1，然后它打开并开始每 3 秒重新加载一次。然后用户单击按钮 Nr 2，它打开，但按钮 Nr 1 的 div 在 3 秒后重新加载。

您可以在下面找到我的代码:

function refreshDiv(id){
    $.ajax({
        url: '<?php echo site_url('canli'); ?>/' + id,
        type: "GET",
        data : "",
        success: function(data) {
            if (data != null)
                $("#matchDetails").html(data);
        },
        error: function (data) {
            console.log(data);
        }
    });
}

$('.livemenumatch').click(function() { 
    clearInterval(refreshIntervalId);
    var id = $(this).attr('data-id');
    localStorage.setItem("lastid", id);
    $.ajax({
        url: 'http://localhost/modo/li/' + id,
        type: 'POST',
        data: { 'submit': true },
        success: function(data) {
            $("#matchDetails").html(data);
        },
    }); 

    var lastid = localStorage.getItem('lastid', lastid);
    var refreshIntervalId = setInterval(function() {
        refreshDiv(lastid)
    }, 3000);  
});

我尝试清除按钮单击后的间隔，但没有任何变化。提前致谢。

Answer 1

问题是因为保存interval 的refreshIntervalId 变量是在点击处理程序的范围内设置的。这意味着当您单击按钮 #2 时，变量不包含任何内容，并且之前的间隔不会被清除。您需要在更高的范围内声明区间变量。试试这个:

var refreshIntervalId; // delcare the variable here...

$('.livemenumatch').click(function() { 
    clearInterval(refreshIntervalId);

    // rest of your code... 

    refreshIntervalId = setInterval(function() {
        refreshDiv(id)
    }, 3000);  
});

但请注意，替代 setInterval() 的更好模式是在每次成功完成请求后调用 setTimeout()。这意味着如果每个请求花费的时间超过 3 秒，它们将不会得到备份并淹没服务器。

function refreshDiv() {
    var id = localStorage.getItem('lastid');
    $.ajax({
        url: '<?php echo site_url('canli'); ?>/' + id,
        type: "GET",
        data : "",
        success: function(data) {
            if (data != null)
                $("#matchDetails").html(data);

            setTimeout(refreshDiv, 3000);
        },
        error: function (data) {
            console.log(data);
        }
    });
}

$('.livemenumatch').click(function() { 
    var id = $(this).attr('data-id');
    localStorage.setItem('lastid', id);
    $.ajax({
        url: 'http://localhost/modo/li/' + id,
        type: 'POST',
        data: { 'submit': true },
        success: function(data) {
            $("#matchDetails").html(data);
        },
    });  
});