如何阻止JavaScript定期刷新服务器上的web页面内容

Question

在学习一些 JavaScript 的过程中，我设法组装了示例，这些示例帮助我定期（在本示例中为每 3 秒）刷新我的 web 页面的内容，并在其中一个之后采取特定的操作（刷新页面）动态标签填充有特定的字符串。

我似乎无法弄清楚的是，一旦我正在评估的标签 () 与特定条件匹配，如何阻止动态内容被轮询。

这是我所拥有的，通常对我有用：

例如，我有一个 web 页面，其中包含分配了“leftHealth”、“leftEnergy”、“rightEnergy”和“turnMsg”id 标签的动态元素：

// On page load, instantiate a listener and begin polling the server for content.
window.addEventListener('load', function(){
    var xhr = null;

    function getXmlHttpRequestObject(){
        if(!xhr){               
            // Create a new XMLHttpRequest object 
            xhr = new XMLHttpRequest();
        }
        return xhr;
    }

    function updateLiveData(){
        var now = new Date();
        // Date string is appended as a query with live data to avoid caching issues
        var url = 'updatedVals.php?ID=' + ID + '&userName=' + userName + '&time=' + now.getTime();
        xhr = getXmlHttpRequestObject();
        xhr.onreadystatechange = eventHandler;
        // asynchronous requests
        xhr.open("GET", url, true);
        // Send the request over the network
        xhr.send(null);
    }

    updateLiveData();


    function eventHandler(){
        // Check response is ready or not
        if(xhr.readyState == 4 && xhr.status == 200){
            let data = JSON.parse(xhr.responseText);
            ['leftHealth','leftEnergy','rightEnergy','turnMsg'].forEach(function(i){
                 document.getElementById(i).innerHTML = data[i]
            });
        setTimeout(updateLiveData, 3000); // Update the live data every 3 sec
        }
    }
});

在这里，我观察与某个值匹配的标签之一，当发生这种情况时，等待约 4 秒，然后刷新页面：

// Start listening for changes in the root HTML element of the page.
mutationObserver.observe(document.documentElement, {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

var counter = 0;
var i = setInterval(function(){
    // Evaluate the "turnMsg" document element we're evaluating and check for the string "Stunned".
    // But even if it does not show up, refresh the page about every minute or so.
    let s = document.getElementById('turnMsg').innerHTML;
    let result = s.includes("Stunned");
    counter++;
    // If <div id="turnMsg"> contains "Stunned", wait 4 seconds then refresh.
    if ((result) || (counter == 15)){
        if (result){
            var i = setInterval(function(){
            }, 4000);
        }
        clearInterval(i);
        mutationObserver.disconnect();  // Stop the MutationObserver from listening for changes.
        location.reload(); // Reload the page.
    }
}, 3000);

这一切都工作得相当好（也许考虑到我的 JavaScript 知识是多么粗略。）。 但是我不太清楚该怎么做是停止每 3 秒轮询一次服务器（发送该 XmlHttpRequest）的过程，并在内容刷新轮询之一拉回进入的值较小的情况后更新页面内容比零。 当 document.getElementById('leftHealth') 中返回的值时，innerHTML < 0。我不再需要刷新 web 页面的内容——这只是在目标 php 页面中浪费带宽和数据库查询，因为从这些服务器返回的值不会更长的变化。

Answer 1

当您停止匹配的条件时，在 3 秒间隔计时器上调用clearInterval() 。

然后使用setTimeout()在 4 秒后重新加载页面。

 var counter = 0; var three_second_timer = setInterval(function() { // Evaluate the "turnMsg" document element we're evaluating and check for the string "Stunned". // But even if it does not show up, refresh the page about every minute or so. let s = document.getElementById('turnMsg').innerHTML; // If <div id="turnMsg"> contains "Stunned", wait 4 seconds then refresh. if ( s.includes("Stunned") || (++counter == 15)) { clearInterval(three_second_timer); mutationObserver.disconnect(); // Stop the MutationObserver from listening for changes. setTimeout(function() { // Reload the page. location.reload(); }, 4000); } }, 3000);