13

前の作業が完了appendするまで、どうすれば待つことができますか。append大量のデータを追加しているので、現在の追加では前の追加が完了したかどうかを確認する必要があります。私はこれを行うために、すべてのアペンドを独立して少し遅れて与えることができます。しかし、実際には私のコードによれば、「n」個の追加がある可能性があるので、これを動的に実行したいと思います。

forまたはwhileループを使用しようとしましたが、前の追加が完了する前に次の追加が開始されるため、スクリプトが破損し、ブラウザーがクラッシュします。

$('#printall1').click(function() {
$('#fourElementsonly').empty();
var cleartable = 0;
var maxlimit = 0;
var presentarraycount = 0;
$.post("/PortalUserReport/getjunkdata", null, function(response, status) {
    var report = eval(response);
    var totalRecordsCount = report.length; //6000
    var totalRecordsCountfortheLoop = totalRecordsCount;
    var arraycount = Math.ceil(totalRecordsCount / 1000);
    var reports = new Array(arraycount); // reports[6]
    for (var i = 0; i < arraycount; i++) {
        $('#fourElementsonly').append('<table border = "1" id = "Portal_User_elements' + i + '" style = " border-collapse:collapse; width:800px; margin:0px; padding:0px; border-color:black"> </table>');
    }
    reports[presentarraycount] = "";
    $.each(report, function(x) {
        if (cleartable == 0) {
            for (var i = 0; i < arraycount; i++) {
                $('#Portal_User_elements' + i).empty();
            }
            cleartable++;
        }
        if (recordnumber <= totalRecordsCountfortheLoop) {
            reports[presentarraycount] += "<tr style = \"height:20px;  border: 1px Solid Black\"> <td style = \"width:50px; text-align:center \"> " + recordnumber + " </td>   <td style = \"width:350px;\"> Name :" + report[x].FirstName + "</td> <td style = \"width:200px;\"> UserName :" + report[x].UserName + " </td> <td style = \"width:200px; \"> Company : " + report[x].Company + " </td> </tr>";
            reports[presentarraycount] += "<tr style = \"height:20px;  border: 1px Solid Black\"> <td > </td> <td> Registration Date : <label class = \"datepicker\"> " + report[x].ActiveDate + " </label> <td> User CN : " + report[x].UserCN + " </td> <td> Status: " + report[x].Status + " </td> </ td>  </tr>";
            reports[presentarraycount] += "<tr style = \"height:20px;  border: 1px Solid Black\"> <td> </td> <td> User Privilege : " + report[x].Privileges + " </td> <td> </td> </tr>";
            maxlimit++;
            if (maxlimit == 1000) {
                presentarraycount++;
                reports[presentarraycount] = "";
                maxlimit = 0;
            }
        }
        recordnumber++;
    });
    for (var i = 0; i < arraycount; i++) {
       $(this).delay(1000, function() {
            $('#Portal_User_elements' + i).append(reports[i]);
       });
    }
});

});
4

9 に答える 9

15

残念ながら、jQueryappend()関数にはコールバックが含まれていません。すぐに完了すると思われるため、実際に完了を確認する方法はありません。

append を効率的に使用する方法については、こちらを参照してください。ほとんどの場合、すべてのテキストを 1 つの変数に取り込んで、append を 1 回だけ使用することができます。

[更新]最初からすべてのデータがJSONオブジェクトにあるため、ループを実行してすべてを変数に入れ、終了したらそれを追加するだけです. [/アップデート]

于 2009-10-08T19:19:44.577 に答える
9

Tim Gard からの回答に基づいて、このソリューションは非常にエレガントであることがわかりました...

$(".selector").append(content).append(function() { /*code goes here to run*/ });
于 2015-04-21T22:52:01.653 に答える
6

めんどくさい方法…

1 つの関数 (既存の関数) がすべての追加を処理します。追加に続いたコードは、新しい関数「kickOffTheRestOfTheProcess」にラップされます。

最初の追加をすべて行った後、最後の追加を 1 つ追加します。他のすべてが実行されるまで実行されません。

$('body')).append("<script>kickOffTheRestOfTheProcess();</script>");

それは私のために働いた。

于 2011-10-07T16:11:04.867 に答える
5

コードを改善するためのヒントをいくつか提供できます。

    for (var i = 0; i < arraycount; i++) {
        $('#fourElementsonly').append('<table border = "1" id = "Portal_User_elements' + i + '" style = " border-collapse:collapse; width:800px; margin:0px; padding:0px; border-color:black"> </table>');
    }

になることができる：

   var html = '';  
   for (var i = 0; i < arraycount; i++) {
       html += '<table border = "1" id = "Portal_User_elements' + i + '" class="portalUserElements"> </table>';
    }
    $('#fourElementsonly').append(html);

次のことを達成します。

  • 「#fourElementsonly」への 999 個の jquery 選択の削減
  • クラス「portalUserElements」に次のスタイルを配置すると、挿入するコードが少なくなります
    。幅:800px; マージン:0px; パディング:0px; 枠の色：黒

これは、次のこともできることを意味します。 

   for (var i = 0; i < arraycount; i++) {
        $('#Portal_User_elements' + i).empty(); 
    }

になります (no for ループ!):

   $('.portalUserElements').empty();

と：

for (var i = 0; i < arraycount; i++) {
    $('#Portal_User_elements' + i).append(reports[i]);
}

次のようになる可能性があります。

$('.portalUserElements').each(
     function(i) {
         $(this).append(reports[i]);
     }
);

編集: これらの変更は、アルゴリズムが提供するすべての機能を維持しながら、アルゴリズムのパフォーマンスを向上させるために提案されています。
単一の文字列変数 (テーブルを含む) 内のすべてを圧縮して、最後に追加することができます。
Russ Cam が回答の 1 つで提案した記事を参照してください。

于 2009-10-08T22:30:23.417 に答える
1

別の要素に追加していますか、それとも単一の要素に追加していますか? 単一の要素に追加する場合は、すべてのデータを連結して 1 つのチャンクとして追加する方が簡単な場合があります。

また、データはどこから？データが静的 (非 ajax) の場合は、呼び出すことができるはずです

$('selector').append(data1).append(data2).append(data3);
于 2009-10-08T19:16:43.460 に答える
0

以下のソリューションは、すべてのブラウザー、特に IE6 で機能しています。Firefox の応答時間は 10 秒ですが、IE6 では 2 分 30 秒です。

$('#printall1').click(function() {
    $('#fourElementsonly').empty();
    var cleartable = 0;
    var maxlimit = 0;
    var presentarraycount = 0;

    $.post("/PortalUserReport/getjunkdata", null, function(response, status) {
        var report = eval(response);// we have 6000 records in the report now
        var totalRecordsCount = report.length; // count = 6000 
        var totalRecordsCountfortheLoop = totalRecordsCount;
        var arraycount = Math.ceil(totalRecordsCount / 1000);
        var reports = new Array(arraycount); // reports[6]
        for (var i = 0; i < arraycount; i++) {
            $('#fourElementsonly').append('<table border = "1" id = "Portal_User_elements' + i + '" style = " border-collapse:collapse; width:800px; margin:0px; padding:0px; border-color:black"> </table>');
        }
        reports[presentarraycount] = "";
        $.each(report, function(x) {
            if (cleartable == 0) {
                for (var i = 0; i < arraycount; i++) {
                    $('#Portal_User_elements' + i).empty(); 
                }
                cleartable++;
            }

            if (recordnumber <= totalRecordsCountfortheLoop) {
                reports[presentarraycount] += "<tr style = \"height:20px;  border: 1px Solid Black\"> <td style = \"width:50px; text-align:center \"> " + recordnumber + " </td>   <td style = \"width:350px;\"> Name :" + report[x].FirstName + "</td> <td style = \"width:200px;\"> UserName :" + report[x].UserName + " </td> <td style = \"width:200px; \"> Company : " + report[x].Company + " </td> </tr>";
                reports[presentarraycount] += "<tr style = \"height:20px;  border: 1px Solid Black\"> <td > </td> <td> Registration Date : <label class = \"datepicker\"> " + report[x].ActiveDate + " </label> <td> User CN : " + report[x].UserCN + " </td> <td> Status: " + report[x].Status + " </td> </ td>  </tr>";
                reports[presentarraycount] += "<tr style = \"height:20px;  border: 1px Solid Black\"> <td> </td> <td> User Privilege : " + report[x].Privileges + " </td> <td> </td> </tr>";
                maxlimit++;
                if (maxlimit == 1000) {
                    presentarraycount++;
                    reports[presentarraycount] = "";
                    maxlimit = 0;
                }
            }
            recordnumber++;
        });

        for (var i = 0; i < arraycount; i++) {
            $('#Portal_User_elements' + i).append(reports[i]);
        }
    });
});
于 2009-10-08T22:05:21.740 に答える
0

おそらく別の方法は、ポーリング関数内で、追加するコンテナーの innerHTML の長さがコンテンツの最後のチャンクの長さと等しいかどうかを単純に確認することでした。

追加しない場合は追加し、追加する場合は追加します。

于 2011-11-13T09:03:48.370 に答える
0

上記の人の答えに基づいて、角度でこれを行いました：

el.append('<span>random stuff</span>').append('{{randomFunction()}}');
于 2015-08-14T20:39:05.863 に答える