setInterval在Ajax请求后停止

Question

我正在使用Asp.net MVC，我希望我的局部视图每隔一段时间刷新一次，直到我提出不相关的Ajax请求，然后它停止为止。

这里有一些简化的片段来说明问题。

在AjaxRefresh.js中：

function ajaxRefresh()
{
    var f = $("#AjaxForm");
    $("#AjaxLoading").show();
    $.post(f.attr("action"), f.serialize(), function (context) {
        $("#AjaxDiv").html(context);
        $("#AjaxLoading").hide();
    });
}
setInterval(ajaxRefresh, 1000);

在Index.aspx中：

<script type="text/javascript" src="../../Scripts/AjaxRefresh.js"></script>
<div id="AjaxDiv">
    <% Html.RenderPartial("Computers", Model, ViewData); %>
</div>

而这在Computers.ascx中：

<% Ajax.BeginForm("Index", new { groupName = Model.Name }, new AjaxOptions() { HttpMethod = "Post", LoadingElementId = "AjaxLoading", UpdateTargetId = "AjaxDiv" }, new { id = "AjaxForm" }); Html.EndForm();%>

<%= Ajax.ActionLink("Send", "Index", new { groupName = Model.Name, data="blah" },
        new AjaxOptions() { HttpMethod="Post", LoadingElementId="AjaxLoading", UpdateTargetId="AjaxDiv" }) %> 

如果单击“发送”链接，所有内容仍然有效，但是页面会自动停止刷新。 我已经尝试订阅ajax事件，但是Sys.WebForms.PageRequestManager.getInstance（）是未定义的。

Answer 1

我不确定为什么会发生这种情况，但是过去我在使用jQuery Ajax刷新和setInterval时遇到过类似的问题。 最后，我切换到重复的setTimeout，没有任何问题：

function onLoad() {
    setTimeout(ajaxRefresh, 1000);
} 

function ajaxRefresh()
{
    var f = $("#AjaxForm");
    $("#AjaxLoading").show();
    $.post(f.attr("action"), f.serialize(), function (context) {
        $("#AjaxDiv").html(context);
        $("#AjaxLoading").hide();
    });
    setTimeout(ajaxRefresh, 1000);
}

Answer 2

我不会使用setInterval来更新内容，就好像内容加载要花费超过1秒的时间一样，您将在队列中有多个请求。

请求完成后使用setTimeout

function sendRequest(){
    $.ajax({
       /** your post data code **/
       complete : function(xhr, status){
                      setTimeout('sendRequest',1000);
                 }
    });
}

这样，在第一个请求完成之前不会发出第二个请求。 这也应该解决您的问题。

Answer 3

尝试在要发布AJAX请求的URL上添加一些随机性。 像$.post(f.attr("action")+"?"+Math.random(), ...) 。 我从来没有想过为什么这行得通，但有时却行得通。 可能是因为您要防止浏览器将缓存结果用于AJAX响应。

Answer 4

如果您的AjaxRefresh.js仅包含您显示给我们的代码，则可以使用此代码。 当浏览器调用.js时，它将开始运行。

var ajax = {

    init: function() {
        ajaxRefresh();
        setTimeout(init, 1000);
    }

    ajaxRefresh: function()
    {
        var f = $("#AjaxForm");
        $("#AjaxLoading").show();
        $.post(f.attr("action"), f.serialize(), function (context) {
            $("#AjaxDiv").html(context);
            $("#AjaxLoading").hide();
        });
    }
}
ajax.init();

Answer 5

一些愚蠢的问题...您是否在浏览器中启用了Java脚本调试功能？

我已经制作了与您在示例应用程序中介绍的示例相同的示例，直到我向Site.Master添加以下脚本后，该示例才起作用：

<script src="../../Scripts/jquery.js" type="text/javascript" ></script>
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript" ></script>
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript" ></script>

如果这样做没有帮助，请检查单击“发送”时从“索引”方法获得的结果。 是PartialView还是常规视图？ 如果正常，您将使用干净的html擦除整个页面（即使其中没​​有文档）。

如果仍然不能解决问题，请在此处运行示例应用程序（至少是我的理解方式），这是我的示例应用程序。

http://www.sendspace.com/file/gk2qro

Answer 6

在匿名函数中包装ajaxRefresh并用括号调用它对我来说很有效。 因此，您的倒数第二行代码类似于setInterval(function () { ajaxRefresh() }, 1000) 。

我也不明白。

Answer 7

我只是用setInterval处理了这种类型的问题。 我要做的是让它继续刷新是在十个请求（间隔触发）之后，清除间隔计时器并再次创建它。 有效地重新启动它。