Как предотвратить невосприимчивый скрипт?

Question

У меня есть код в javascipt, который заполняет список выпадающего списка. В этом списке содержится более 10 000 данных. Я исследовал проблему и выяснил, что причиной было большое количество данных.

вот код:

$("select#mdl-criteria-category").change(insertCriteriaOptions); 
$("select#mdl-criteria-level").change(insertCriteriaOptions); 
$("select#mdl-criteria").change(checkIfCriteriaExists); 


function insertCriteriaOptions() { 
    var skillId = $("select#mdl-criteria-category").val(); 
    var level = $("select#mdl-criteria-level").val(); 

    if (skillId != '-' && level != '-') { 
     removeAllOptions("#mdl-criteria"); 
     addDefaultOption(); 
     filterCriteriaOptions(skillId, level); 
    } 
} 

function filterCriteriaOptions(skillId, level) { 
    var optionId = skillId + "-" + level; 

    for (var key in criteriaOptionList) { 
     var id = key.split("-"); 
     if (id[0] == skillId && id[1] == level) { 
      var option = document.createElement("option"); 

      option.text = criteriaOptionList[key]; 
      option.value = id[2]; 
      document.getElementById("mdl-criteria").add(option); 
     } 
    } 
} 

function populateCriteriaOptionList() { 
    $("#mdl-criteria option").each(function() { 
     if (this.id != '-') { 
      var id = this.id + '-' + this.value; 
      criteriaOptionList[id] = this.text;   
     } 
    }); 
} 

Результаты моего исследования показывают, что это происходит из-за функции populateCriteriaOptionList(), так как этот метод должен получить 10000 данных, чтобы быть в массиве criteriaOptionList. Кто-нибудь знает, как любое решение в этом случае? Возможно, кто-то может помочь мне исправить мою проблему. Заранее спасибо.

Answer 1

Таким образом, у вас есть очень большой массив, который вам нужно обработать, но он настолько велик, что он блокирует поток выполнения и делает страницу невосприимчивой.

Это то, что WebWorkers weve предназначено для. Существуют некоторые ограничения, например, они не могут манипулировать DOM, но это может не быть проблемой для вас.

Возможно, посмотрите на Polymer's iron-list. Это компонент для отображения чрезвычайно большого количества данных. Опять же, это зависит от вашего конкретного варианта использования.

Другим способом может быть разбиение массива на более мелкие куски (например, по 100 элементов каждый), а затем обработка их с некоторой задержкой.