要素/ノードリストの変更が遅すぎる

Question

div内に多数のチェックボックスがあり、リセットしたい。それらのすべては変化の同じイベントを持っています。リセットボタンをクリックすると、現在のプロパティとdata-defaultが比較され、異なる場合はプロパティがこの値に設定され、変更イベントがトリガされます。

データデフォルトは、ページロード時に設定されたチェックボックスのチェック状態またはセクションがajaxによって保存されたときの状態です。

var $checkboxes = $section.find(":checkbox"); 

for (var i = 0; i < $checkboxes.length; i++) { 
    var $cb = $($checkboxes[i]); 

    var currentValue = $cb.prop("checked"); 
    var defaultValue = $cb.data("default"); 

    if (currentValue !== defaultValue) { 
     $cb.prop("checked", defaultValue) 
      .trigger("change"); 
    } 
} 

ここでの問題はパフォーマンスです。 70のチェックボックスに対してjqueryを使って変更イベントをトリガするには約1秒かかります。また、1000個のチェックボックスがリセットされると、ブラウザがクラッシュしない場合は約5分かかります。

オブジェクトの配列のonchangeイベントを発生させる良い方法はありますか？おそらく、vanilla javascriptを使用しますか？

Answer 1

あなたのコードに多くの問題があるとは思われません。おそらくコールバックにパフォーマンスのボトルネックがあります。あなたは一つのことをすることができます。 Chromeを使用している場合は、Chrome Profilerを使用して、時間の移動先を正確に把握できます。開発ツールには、問題を解決するのに役立つパフォーマンスタブがあります。

Answer 2

私は右のあなたの質問を得た場合は、すべてのチェックボックスをチェックしたい、リセットボタンをクリックしたとき..私はjQuery function each()を使用することをお勧めし、あなたのコード

少し簡素化私が選択するには、このコードを使用してきました多くのチェックボックスが付いた連絡先リストのすべての名前は速く実行されますが、それはあなたのために同じことを望みます！

$('#reset-button').click(function() { 
 
    
 
    // Search for each checkbox 
 
    $("input[type='checkbox']").each(function(){ 
 
    
 
     // Verify if is checked 
 
     $value = $(this).is(":checked"); 
 
     
 
     if($value == false){ 
 
      // If not checked, turns checkbox into checked state 
 
      $(this).prop("checked", true); 
 
     } 
 
     
 
    }); 
 
    
 
});

button { 
 
    margin-bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="reset-button">Reset</button> 
 

 

 
<div> 
 
    <input type="checkbox" value="one">1 
 
    <input type="checkbox" value="two" checked>2 
 
    <input type="checkbox" value="three">3 
 
    <input type="checkbox" value="four">4 
 
    <input type="checkbox" value="five" checked>5 
 
    <input type="checkbox" value="six" checked>6 
 
    <input type="checkbox" value="seven" checked>7 
 
    <input type="checkbox" value="eight">8 
 
</div>