Question

我有2个选择框，一个有可能的选择，另一个有选择。用户从第一个中选择，然后按下将其复制到第二个的按钮。如果我在第一个中有7500个选项，并且我全部选择它们，则大约需要这个时间将它们全部复制到第二个选择（在我的电脑上）：

IE v11 : ~3 minutes
Chrome v65: ~2 minutes
Firefox (latest): ~7 seconds (not a typo)

为了努力改善时间，我尝试分成一次复制150块但却无济于事。循环是这个（下面）。在这里，我停在max = 150并再次递归调用它。但是原始循环到了选择的结尾。比我的快得多。有没有人有任何想法来优化它以在Chrome，IE上获得更合理的回应？

// o_col = originating select, d_col = target select.
copyOptionAddPrefixRecursive:function(o_col, d_col, prefix, destTabId,  
badgeId, startingIndex, max) {
// same as copyOptionAddPrefix but it is recursive and has a max # of options to copy.
  var cntr = 0;
  var i;
  for (i=startingIndex;i<document.form1[o_col].length && cntr < max;i++) {
    if (document.form1[o_col].options[i].selected==true) {
      oText = document.form1[o_col].options[i].innerHTML;
      if (prefix) oText = prefix + ' ' + oText;
      oValue = document.form1[o_col].options[i].value;
      //document.form1[d_col].options[document.form1[d_col].length] = new     Option (oText, oValue, false, selectedBool);
      var newOpt = new Option (oText, oValue, false, false);
      newOpt.title = oText;
      newOpt.text = null;
      newOpt.innerHTML = oText;
      document.form1[d_col].options[document.form1[d_col].length] = newOpt;
      document.form1[o_col].options[i].selected=false;
      cntr++;
    }
  }
  var selTotal = $('#xtabDemos1 :selected').length;
  if (selTotal) {
    var cmd = 'addressBook.copyOptionAddPrefixRecursive(\"' + o_col  + '\",\"' + d_col + '\",';
    if (prefix && prefix != null) cmd += '\"' + prefix + '\"';
    else  cmd += prefix;
    cmd +=  ',\"' + destTabId + '\",\"' + badgeId + '\",' + i + ',' + max  + ');';
    setTimeout(cmd, 50); // run cmd after 50 ms.
  } else {
    $('.nav-tabs a[href="' + '#' + destTabId + '"]').tab('show');
    updateBadge(document.getElementsByName(d_col)[0], badgeId);
  }

以下是选择的示例。我原以为问题是在循环中的两个选择中都调用了onchange，但我在onchange函数中添加了console.log（）行，并且它似乎没有被调用。

<select class="form-control my_select" onchange="checkAdjacentRow('DEMOS_LIST_XTAB');" 
multiple="" name="DEMOS_LIST_XTAB" id="xtabDemos1" style="height:100%;">
<option value="(181124 ! 181134)" title="TOOTHPASTE; Baking Soda (6m)">TOOTHPASTE; Baking Soda (6m)</option>
<option value="(181125 ! 181135)" title="TOOTHPASTE; Non Baking Soda (6m)">TOOTHPASTE; Non Baking Soda (6m)</option>
<option value="(181126 ! 181136)" title="TOOTHPASTE; Tartar Control (6m)">TOOTHPASTE; Tartar Control (6m)</option>
<option value="(181127 ! 181137)" title="TOOTHPASTE; Regular (Not Tartar Control) (6m)">TOOTHPASTE; Regular (Not Tartar Control) (6m)</option> 
</select>

和目标选择：

<select class="form-control my_select mySelectionsSelects" onchange="checkAdjacentRow('DEMOS_SELECTED_XTAB_COLS');" multiple="" name="DEMOS_SELECTED_XTAB_COLS" id="demosXtabCols">
</select>

Answer 1

虽然options框中不应该有7500 select，但我无法想象为什么要将select的内容复制到另一个innerHTML，以及我还没有对性能进行测试，只需复制let mySelects = document.querySelectorAll('.my_select'); let firstSelect = mySelects[0]; let secondSelect = mySelects[1]; secondSelect.innerHTML = firstSelect.innerHTML;：

就更容易了

myFct() {
    this[type](url, params, options).pipe(...)
}

get<T>(url: string, params: HttpParams, options: any): Observable<HttpEvent<T>> {
    return this._http.get<T>(url, options);
}

post<T>(url: string, params: HttpParams, options: any): Observable<HttpEvent<T>> {
    return this._http.post<T>(url, params, options);
}

put<T>(url: string, params: HttpParams, options: any): Observable<HttpEvent<T>> {
    return this._http.put<T>(url, params, options);
}

delete<T>(url: string, params: HttpParams, options: any): Observable<HttpEvent<T>> {
    return this._http.delete<T>(url, options);
}

javascript - 通过非常长的选择优化循环

1 个答案: