jquery/javascript setInterval答案

【问题标题】：jquery/javascript setIntervaljquery/javascript setInterval
【发布时间】：2014-02-17 21:43:25
【问题描述】：

目前我正在开发一个用户通知提醒消息功能。

我设法使用setInterval 来控制我的Ajax 调用（检查是否有任何通知消息给用户）。但我的问题是我只想要通知消息在页面上出现一次（现在它在屏幕上显示多个通知警报消息）。我知道你可以使用setTimeout 让它只调用一次，但我还需要该页面检查是否每 5 分钟有一个新的通知消息提醒。

第二个问题是否有可能第一轮立即调用 Ajax 调用，然后每 5 分钟调用一次所有其他调用？因为我希望系统在他们登录系统后立即检查一次，然后每 5 分钟检查一次。

这是我的代码

function getAjaxNotice() {
    $.post("/async/getnotification", {},
        function(response) {
            var notice = $(response);
            $("#notices").prepend(notice);
        });

    return false;
}

setInterval("getAjaxNotice()", 50000);

【问题讨论】：

标签： javascript jquery

【解决方案1】：

首先，您应该将初始化代码包装在 onLoad 函数中：

$(document).ready(function() {
  // Put all your code here
});

让它出现一次很容易，使用 .html() 来设置内容而不是添加内容：

$("#notices").html(notice);

第三，作为样式说明，您不应该将字符串传递给 setInterval()。而是传递一个函数名：

setInterval( getAjaxNotice, 50000 );

最后，让它现在调用函数，并在每 5 分钟后再次调用，使用：

// Set the timer
setInterval( getAjaxNotice, 50000 );
// Call it once now
getAjaxNotice();

另请注意，50000 是 50 秒，而不是 5 分钟。 5 分钟将是 5 * 60 * 1000 = 300000。

【讨论】：

是的，我同意，在这种情况下，没有理由将字符串传递给 setInterval。除非有一些情有可原的情况，否则您应该尝试将函数传递给 setInterval/setTimeout。我不确定当他们引入“严格模式”时传递字符串是否有效，我认为严格模式不允许使用 eval。

【解决方案2】：

对于第一个问题，您应该存储来自setInterval 的返回值，然后在收到警报时调用clearInterval(myIntervalId)。

对于第二个问题，可以在body的onload过程中调用getAjaxNotice一次，如果没有收到alert，此时调用setInterval。

【讨论】：

是的，存储返回值绝对是件好事。特别是如果您需要在某个时候取消计时器。我不知道每次通话后我会清除它。这本质上与调用 setTimeout(functionX, timeoutPeriod) 然后在 functionX 内部调用 setTimeout(functionX, timeoutPeriod) 相同。所以我想说当你完成它时清除间隔。
@Mark 我认为我的帖子不清楚；我原本打算在收到警报时清除间隔（而不是在每次通话后）。OP 似乎想在那时停止查询。

【解决方案3】：

setInterval 的时间以毫秒为单位。

5 minutes * 60 seconds * 1000 milliseconds = 300000ms

另外，我建议你将函数传递给setInterval 而不是字符串，这样可以避免隐式使用eval。

setInterval(getAjaxNotice, 300000);

要在页面开头调用getAjaxNotice，请将其放入ready 块中。

$(function(){
    getAjaxNotice();
});

【讨论】：

【解决方案4】：

有几件事...

setInterval("getAjaxNotice()", 50000);

不是 5 分钟。

5 分钟 = 300000 毫秒。

如果你想让它立即运行，然后每 5 分钟运行一次，你可以简单地这样做

$(document).ready(function() {
     getAjaxNotice();



        function getAjaxNotice() {
             $.post("/async/getnotification" , 
             {},                              
             function(response)
             {
                  var notice = $(response);
                  $("#notices").prepend(notice);
             });
             return false;                      
       } 

       setInterval( getAjaxNotice(), 300000 );

});

【讨论】：

【解决方案5】：

在您的情况下，您似乎正在处理一些问题。因此，使用您当前的方法，您最初可以进行 ajax 调用，然后设置超时时间：

getAjaxNotice();
setTimeout( "getAjaxNotice()", 300000);

其次，如果您有某种类型的“消息确认”事件，可以轻松确保用户只收到一次消息。假设您的用户可以在多台计算机上打开浏览器，如果您让用户单击消息或单击确定按钮，或执行某些操作以确认他们收到消息，则可以触发另一个 ajax 调用以从缓冲区中删除该消息在您的服务器上，但仍会在所有打开的浏览器上显示它。本地浏览器只会显示一次，因为如果消息是重复的，您可以阻止在客户端显示它（基于对您的应用程序有意义的标准）

但是，您应该研究长轮询和 COMET，http://en.wikipedia.org/wiki/Comet_(programming)。 Comet 是一个基于服务器端事件向 Web 浏览器推送通知的概念，而不是 Web 浏览器不断要求服务器进行更改。

由于网络框架和浏览器的限制，这是通过一些技术完成的，但长轮询似乎是最普遍的。 HTML5 和 websockets 正在尝试进行一些更改，以防止一起轮询，但它还没有现成的可用。

Long Polling、http://en.wikipedia.org/wiki/Push_technology 和基于 COMET 的架构已被 meebo 和 facebook 等公司使用。不要引用我的话，但出于某种原因，我倾向于相信 facebook 使用基于 Erlang 的网络服务器来提供他们的聊天消息。 Erlang 和 NodeJ 只是您可以用来构建轻量级 Web 服务器的几个解决方案，这些解决方案可以很好地处理大量访问服务器的长轮询请求。

您绝对应该自己阅读所有这些内容，因为有大量可用信息。我已经尝试在 Amazon EC2 上创建 NodeJs 服务器，因为我传统上是一个 .NET 工作，并且不认为 IIS 是支持使用长轮询的 .net 应用程序的长轮询功能的正确解决方案，而且我不得不说我非常喜欢 NodeJs。加上我对 Erlang 的了解有限，我对 javascript 语言更加熟悉。

【讨论】：