選択に多くのオプションを追加するjQueryはクロムを殺します

jQueryを使用して選択に約500のオプションを追加しようとしています。500回のループを実行します。

for( var i=0; i<ids.length;i++ ){
  $("#selectId').append('<option value="' + value + '">' + label + '</option>');
}

Mozilla Firefoxなど、それは罰金に動作します(約3秒かかります)が、中にGoggle Chromeブラウザ半分分後にクラッシュします。

私はそれがどれくらいの時間を必要とするかを見るためにいくつかのログを置きました、それはループごとに1msで始まり、それからそれは〜1sに増加します...

それをより効率的にするための提案はありますか?

yoavmatchulsky

ループに2つのパフォーマンスの問題があります。

  1. 各反復で、新しいjQueryオブジェクトを作成し、DOMで#selectIdを検索します。
  2. 各反復で、DOMを操作し、1行を追加します。

これらは両方ともパフォーマンスにコストがかかります。試してください:

var options = [];
for (var i = 0; i < ids.length; i++) {
  // first, populate an array with all the options as strings
  options.push('<option value="' + value + '">' + label + '</option>');
}
// then, join that array into a string and just .append or .html
$('#selectId').append(options.join(''));
// OR
$('#selectId').html(options.join(''));

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ループをforeachし、選択ボックスにオプションを追加する方法は?jqueryから?

分類Dev

JQueryは、7つの異なる選択に対して動的に選択するオプションを追加します

分類Dev

AngularJSは、ある選択オプションを別の選択オプションにマップします

分類Dev

新しく追加された選択オプションに選択オプションを表示する方法

分類Dev

複数選択のオプションを単純選択に追加します

分類Dev

javascriptまたはjqueryを使用して選択ボックスオプションの最初のオプションから値を空にする方法は?

分類Dev

jQuery /プログラムで選択ボックスのオプションを選択する

分類Dev

jQueryは特定のオプションを選択の上部に移動します(ドロップダウン)

分類Dev

jQueryを使用して選択にオプションを追加しますか?

分類Dev

JQuery別のチェックボックスをクリックして複数選択するいくつかのオプションを選択します

分類Dev

Javascript / jQueryの選択ドロップダウンの動的に追加されたオプションを選択(変更をトリガー)します

分類Dev

jQuery選択プラグインはAjaxを使用せずに動的にオプションを追加しますか?

分類Dev

AngularJSはロード時に空のオプションを選択します

分類Dev

選択ボックスのすべてのオプションを削除してから、1つのオプションを追加してjQueryでそれを選択するにはどうすればよいですか?

分類Dev

選択ボックスのオプションの1つに異なる結果を追加します

分類Dev

デフォルトのオプションが選択されている場合は、「選択」にクラスを追加します

分類Dev

Androidデバイスのコードを実行するときにJavaを使用して、Eclipseのドロップダウンリストの多くのオプションから1つのオプションを選択します

分類Dev

AngularJsは追加オプションを選択します

分類Dev

1つの選択オプションを変更すると、他の多くのオプションが変更されます(JavaScript、JQuery)

分類Dev

jQuery:タグを選択するためのオプションを追加しようとしています

分類Dev

select2jqueryまたはjavascriptの次の選択ボックスで選択したオプションを非表示にする

分類Dev

選択ドロップダウンのオプションにonclickイベントを動的に追加します

分類Dev

カード内のプロンプトオプションで表示されるカスタム選択を追加し、c#を使用してBOT V4で選択クリック時にアクションをトリガーするにはどうすればよいですか?

分類Dev

選択したホバーの青いハイライトを削除する方法、オプションはクロムのhtmlを入力します

分類Dev

複数の選択要素にオプションを追加する

分類Dev

合計2がJqueryによる合計より大きいオプションを選択する場合は、選択オプションを削除します

分類Dev

選択オプションに応じてアイテムにクラスを追加します

分類Dev

jQueryは選択からオプションを削除します

分類Dev

jQueryは、選択オプションのクローンを作成した後にデータIDを取得します

Related 関連記事

  1. 1

    ループをforeachし、選択ボックスにオプションを追加する方法は?jqueryから?

  2. 2

    JQueryは、7つの異なる選択に対して動的に選択するオプションを追加します

  3. 3

    AngularJSは、ある選択オプションを別の選択オプションにマップします

  4. 4

    新しく追加された選択オプションに選択オプションを表示する方法

  5. 5

    複数選択のオプションを単純選択に追加します

  6. 6

    javascriptまたはjqueryを使用して選択ボックスオプションの最初のオプションから値を空にする方法は?

  7. 7

    jQuery /プログラムで選択ボックスのオプションを選択する

  8. 8

    jQueryは特定のオプションを選択の上部に移動します(ドロップダウン)

  9. 9

    jQueryを使用して選択にオプションを追加しますか?

  10. 10

    JQuery別のチェックボックスをクリックして複数選択するいくつかのオプションを選択します

  11. 11

    Javascript / jQueryの選択ドロップダウンの動的に追加されたオプションを選択(変更をトリガー)します

  12. 12

    jQuery選択プラグインはAjaxを使用せずに動的にオプションを追加しますか?

  13. 13

    AngularJSはロード時に空のオプションを選択します

  14. 14

    選択ボックスのすべてのオプションを削除してから、1つのオプションを追加してjQueryでそれを選択するにはどうすればよいですか?

  15. 15

    選択ボックスのオプションの1つに異なる結果を追加します

  16. 16

    デフォルトのオプションが選択されている場合は、「選択」にクラスを追加します

  17. 17

    Androidデバイスのコードを実行するときにJavaを使用して、Eclipseのドロップダウンリストの多くのオプションから1つのオプションを選択します

  18. 18

    AngularJsは追加オプションを選択します

  19. 19

    1つの選択オプションを変更すると、他の多くのオプションが変更されます(JavaScript、JQuery)

  20. 20

    jQuery:タグを選択するためのオプションを追加しようとしています

  21. 21

    select2jqueryまたはjavascriptの次の選択ボックスで選択したオプションを非表示にする

  22. 22

    選択ドロップダウンのオプションにonclickイベントを動的に追加します

  23. 23

    カード内のプロンプトオプションで表示されるカスタム選択を追加し、c#を使用してBOT V4で選択クリック時にアクションをトリガーするにはどうすればよいですか?

  24. 24

    選択したホバーの青いハイライトを削除する方法、オプションはクロムのhtmlを入力します

  25. 25

    複数の選択要素にオプションを追加する

  26. 26

    合計2がJqueryによる合計より大きいオプションを選択する場合は、選択オプションを削除します

  27. 27

    選択オプションに応じてアイテムにクラスを追加します

  28. 28

    jQueryは選択からオプションを削除します

  29. 29

    jQueryは、選択オプションのクローンを作成した後にデータIDを取得します

ホットタグ

アーカイブ