Question

我有一个场景，我将在网页的底栏显示新闻。我正在调用一个cgi脚本，该脚本将以最多4个元素的字符串数组的形式返回新闻，间隔为10秒。

收到新闻项目数组后，我每2秒更新一次底栏，显示1个新闻项目。这是我的代码：

 function listenForNews(){   
    var xmlHttpReq = getXMLHttpReq();   
    var destinationURL = cgi+"/news.cgi";
    if (xmlHttpReq.readyState == 0){
        xmlHttpReq.open('GET', destinationURL, true);
        xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlHttpReq.onreadystatechange = function() {
            if (xmlHttpReq.readyState == 4) {
                if(xmlHttpReq.responseText != ""){
                    updateNews(xmlHttpReq.responseText);
                    t=setTimeout("listenForNews();",10000);
                }
            }
        }
        xmlHttpReq.send();
    }   
}

  //Pause JS execution for 2 seconds to display 1 item at a time
    function pause(ms) {    
        ms += new Date().getTime();
        while (new Date() < ms){}
    }
    //update text field after 2 sec
    function updateNews(buffer){
        for(var i=0;i<buffer.length;i++){
            document.getElementById('text').value = buffer[i] + " at "+ new Date();
            pause(2000);
        }
}

但我面临的问题是我无法获得与预期完全相同的情况。实际上，cgi呼叫本身每次延迟超过20秒（10秒* 2秒）。

因此，在GUI上，文本字段在大约20秒后更新。我想要的是textfield应每2秒更新一次，并且每隔10秒应该进行一次cgi调用（同步方式）

有可能实现这个目标吗？

Answer 1

这样的pause函数会挂起浏览器，阻止它重绘页面。因此，直到i上的循环结束才会发生任何事情。有两种简单的方法可以实现setTimeout s：

function updateNews(buffer, i)
{
    document.getElementById('text').value = buffer[i] + " at "+ new Date();
    if(i + 1 < buffer.length)
        setTimeout(function() {updateNews(buffer, i+1);}, 2000);
}

将由updateNews(xmlHttpReq.responseText, 0);调用。这通过让每个调用为下一个创建超时来链接调用。

function updateNews(buffer)
{
    var i;
    for(i = 0;i < buffer.length;i++)
        setTimeout(function() {document.getElementById('text').value = buffer[i] + " at "+ new Date();}, 2000 * i);
}

这个设置在开始时设置所有超时，使用不同的时间长度将它们分开。

Answer 2

setInterval在这里更合适。以下内容更接近您的需求：

function updateNews(buffer) {
  var el = document.getElementById('text'), idx = 0, len = buffer.length;
  setInterval(function () {
    el.value = buffer[idx %= len] + ' at ' + new Date;
    idx += 1;
  }, 2000);
}

暂停执行后需要调用函数

2 个答案: