Javascript “重构出”；停止运行此脚本？"；jquery中的错误

我一直在调整这个和那个，试图让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>

显示所有。。。
“alt=”正在加载…”/>

然后我们有一个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”）。单击（函数（）{
var divText=$（this.html（）；
var src=''；
如果（divText==“全部显示…”）{
$（this.html（“显示过滤…”）；
$（'手风琴'）。手风琴（'销毁'）；
$（“#手风琴”）.empty（）；
$（“#手风琴”）.addClass（“加载”）；
$（'手风琴'）.append（'加载信息…'）；
变更部分视图（“全部”）；
}
否则{
$（this.html（“全部显示…”）；
$（'手风琴'）。手风琴（'销毁'）；
$（“#手风琴”）.empty（）；
$（“#手风琴”）.addClass（“加载”）；
$（'手风琴'）.append（'加载信息…'）；
更改局部视图（“过滤器”）；
}
});
});

接下来调用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);
        }
    });
}

//更改视图并重新编辑手风琴
函数更改PartialView（视图类型）{
$.ajax({
类型：“POST”，
url:“+”切换视图“，
数据：“类型=&Id=&view=“+viewType，
成功：功能（结果）{
$（“#手风琴”）.empty（）；
$（“#手风琴”）.removeClass（）；
对于（var index=0；index=0）{
var clickedId=ui.newHeader.find（“a”）.find（“title”）.text（）；
获取需求（单击edid）；
}
否则{
//所有面板均已关闭
}
}
});
},
错误：函数（xhr，err）{
警报（“readyState:+xhr.readyState+”\n状态：+xhr.status）；
警报（“responseText:+xhr.responseText”）；
警报（“ajax中的错误：+结果”）；
}
});
}

注意：结果。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>")

“”）

for（var index=0；index

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

        var holder = $('<div></div>');
        for (var index = 0; index < result.Html.length; index++) {
            holder.append(result.Html[index]);
        }
        $('#accordion').append(holder.children());

var持有人=$（''）；
对于（var index=0；index

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

setTimeout

）

在那个大HTML字符串中只有两个动态内容，这是非常浪费的

---

或者返回更少的项？

我要尝试的第一件事是在循环之前创建一个新的

元素，附加ajax结果，将结果附加到该元素而不是真正的DOM，然后在完成后附加

。什么是

结果.Html

？我想知道您是否在逐个字符地附加一个长字符串ter…我想这就是@evan刚刚提交的内容-请看我的回复。@MrOBrian-请看最后的说明，它解释了返回的内容。我发现成功回调中的for循环是浏览器唯一可能卡住的地方。如果您以JSON形式返回数据，IE7可能无法正确理解。请尝试执行

警报（result.Html.length）

并查看IE7与其他浏览器相比的表现。我按照您的建议对其进行了更改，但仍然收到了消息。我还将所有手风琴选择器分解为单击函数和更改视图函数中的一个调用（var$acc=$（“#accordion”）；）然后在所有后续调用中使用该变量。我认为这可能会有所帮助。老实说，您没有给我们太多的时间来处理。该错误只是意味着某些事情需要很长时间。它可能是任何东西。（您没有将$.ajax配置为同步的，是吗？）试着用Chrome的web开发者工具分析你的脚本。你可以尝试的另一件事是在服务器上组装HTML，然后用$（'#accordion'）.HTML（assembledHTML）插入它在这里获得任何第三方工具就像拔牙一样。获得它最多需要几周的时间。这对尖端开发非常有益：P至于$ajax被配置为同步，我很确定我没有……我也尝试过。我想拥有一个排序数组可以让我插入setTimeout，但我不能让它也起作用。是的，那很好

        var holder = $('<div></div>');
        for (var index = 0; index < result.Html.length; index++) {
            holder.append(result.Html[index]);
        }
        $('#accordion').append(holder.children());