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

问题是因为保存refreshIntervalId的{{1}}变量是在单击处理程序的范围内设置的。这意味着当您单击按钮＃2时，变量不保留任何内容，并且不会清除上一个间隔。您需要在更高的范围内声明区间变量。试试这个：

interval

但请注意，使用而不是var refreshIntervalId; // delcare the variable here... $('.livemenumatch').click(function() { clearInterval(refreshIntervalId); // rest of your code... refreshIntervalId = setInterval(function() { refreshDiv(id) }, 3000); });的更好模式是在每次成功完成请求后调用setInterval()。这意味着，如果每个请求花费的时间超过3秒，则他们将无法备份并充斥服务器。

setTimeout()

Javascript重新加载Div冲突

1 个答案: