在jquery中重构“停止运行此脚本?”错误

Refactor out "Stop running this script?" error in jquery

本文关键字：脚本 错误 运行 jquery 重构      更新时间：2023-09-26

我一直在调整这个，那个和另一个，试图让"停止运行此脚本？"错误在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>

然后我们有一个点击功能来启动它......

$(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);
        }
    });
}

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

返回值的说明：结果。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 < 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());

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

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

还是退货更少？

相关文章：