0

我一直在调整这个、那个和另一个，试图让“停止运行这个脚本？” 在 IE7 中消失的错误 - 此时所有用户都必须使用的浏览器：P 我已经尝试了几次改进尝试；所有这些都导致脚本停止工作，而不是长时间运行。我试过使用 setTimeout()，但没有运气。有可能我没有正确地做到这一点。任何人都可以提出改进方法以使其更高效（并让该长时间运行的脚本消息消失）？

这是代码：

的HTML：

<div class="changeView" style="float:right;">Show All...</div>
<div id="accordion" style="width: 99%;">
    <% foreach (var obj in Model.Objects) { %>
        <h3><a href="#"><span class="title"><%:obj.Id%></span><span class="status" style="font-size:75%"> - <%:obj.Status%></span></a></h3>
        <div id="<%:obj.Id %>">
            <div class="loading"><img src="<%=Url.Content("~/Content/Images/ajaxLoader.gif") %>" alt="loading..." /></div>
        </div>
    <% } %>
</div>

然后我们有一个 onclick 函数来启动它......

$(function () {
    $(".changeView").click(function () {
        var divText = $(this).html();
        var src = '<%=Url.Content("~/Content/Images/ajax-loader.gif")%>';

        if (divText == "Show All...") {
            $(this).html("Show Filtered...");
            $('#accordion').accordion('destroy');
            $('#accordion').empty();
            $('#accordion').addClass("loading");
            $('#accordion').append('Loading Information...<img src="' + src + '" alt="loading..." />');
            changePartialView("all");
        }
        else {
            $(this).html("Show All...");
            $('#accordion').accordion('destroy');
            $('#accordion').empty();
            $('#accordion').addClass("loading");
            $('#accordion').append('Loading Information...<img src="' + src + '" alt="loading..." />');
            changePartialView("filter");
        }
    });
});

接下来调用changeView函数：

//change view and reinit accordion
function changePartialView(viewType) {
    $.ajax({
        type: "POST",
        url: "<%:Model.BaseUrl%>" + "ToggleView",
        data: "Type=<%:Model.Target%>&Id=<%:Model.Id%>&view=" + viewType,
        success: function (result) {
            $('#accordion').empty();
            $('#accordion').removeClass();
            for (var index = 0; index < result.Html.length; index++) {
                $('#accordion').append(result.Html[index]);
            }
            var $acc = $("#accordion").accordion({
                collapsible: true,
                active: false,
                autoHeight: false,
                change: function (event, ui) {
                    var index = $acc.accordion("option", "active");
                    if (index >= 0) {
                        var clickedId = ui.newHeader.find("a").find(".title").text();
                        getRequirements(clickedId);
                    }
                    else {
                        // all panels are closed
                    }
                }
            });
        },
        error: function (xhr, err) {
            alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
            alert("responseText: " + xhr.responseText);
            alert("Error in ajax: " + result);
        }
    });
}

注意： result.Html 返回一个通用的格式化 HTML 列表，每个折叠面板对应一个。除了长时间运行的脚本错误消息外，每个人都工作得很好。

返回值说明： result.Html 由这些字符串的大约 200-250 个实例组成：

"<h3><a href=\"#\"><span class=\"title\">" + obj.Id +
"</span><span class=\"status\" style=\"font-size:75%\"> - " + obj.Status + count +
"</span></a></h3><div id=\"" + obj.Id + "\"><div class=\"loading\"><img src=\"" +
Url.Content("~/Content/Images/ajaxLoader.gif") + "\" alt=\"loading...\" /></div></div>")
4

2 回答 2

1 
        for (var index = 0; index < result.Html.length; index++) {
            $('#accordion').append(result.Html[index]);
        }

将大量节点一次一个地添加到 DOM 中很慢，一种可以加快速度的方法是将它们全部插入到一个未连接的节点中，然后在完成后立即将它们全部移动：

        var holder = $('<div></div>');
        for (var index = 0; index < result.Html.length; index++) {
            holder.append(result.Html[index]);
        }
        $('#accordion').append(holder.children());
于 2012-08-09T21:57:58.243 回答
0

更改服务器以返回数据而不是大量 HTML。使用客户端模板解决方案。然后，一旦你有了一个数组，你就可以异步更新显示（就像setTimeout你提到的那样）

那个大的 HTML 字符串中只有两个动态的东西，非常浪费。

还是退货少？

于 2012-08-09T22:24:07.967 回答