요소/노드 목록에서 트리거가 너무 느림

Question

div 안에 여러 체크 박스가 있습니다. 재설정하고 싶습니다. 그들 모두는 변화에 대해 동일한 사건을 겪는다. 재설정 버튼을 클릭하면 현재 등록 정보와 데이터 기본값이 비교되고 다른 등록 정보가 있으면이 등록 정보가이 값으로 설정되고 변경 이벤트가 트리거됩니다.

데이터 기본값은 페이지로드시 설정된 체크 상태 또는 아약스에 의해 섹션이 저장 될 때 체크 된 상태입니다.

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 이벤트를 발생시키는 더 좋은 방법이 있습니까?

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>