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 は、アコーディオンの各パネルに 1 つずつ、書式設定された 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]);
        }

多くのノードを 1 つずつ DOM に追加するのは時間がかかります。これを高速化できる方法の 1 つは、接続されていないノードにすべてのノードを挿入し、完了したら一度に移動することです。

        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 文字列には 2 つの動的なものしかなく、かなり無駄です。

または、より少ないアイテムを返しますか？

于 2012-08-09T22:24:07.967 に答える