javascript - 单击检查所有按钮问题

Question

我有一个选中所有按钮，单击它会选中所有复选框。但是在我的显示页面上，我有 30000 个复选框，这让我在单击“全部选中”按钮时页面没有响应。有人可以帮忙吗。

function js_select_all(btn,theForm){
   if (btn.value == "Check All")  {
       var checkval = "checked";
       if (js_one_row(theForm.circSelected)) {
           theForm.circSelected.checked = checkval;
       } else {
           for (var i=0; i < theForm.circSelected.length; i++){
               theForm.circSelected[i].checked = checkval;
           }
       }
       btn.value ="Uncheck All";
   }else {
       if (js_one_row(theForm.circSelected)) {
           theForm.circSelected.checked = false;
       } else {
           for (var i=0; i < theForm.circSelected.length; i++){
               theForm.circSelected[i].checked = false;
           }
       }
       btn.value = "Check All";
    }
}

有人能帮助我以最快的方式实现结果吗？我正在开发一个仅支持 HTML、CSS 和 JS 的网络工具包。

Answer 1

将任务分成更小的 block ，并在使用 setTimeout 短暂延迟后运行它们

这允许浏览器保持响应。大概所有复选框都立即更改状态不是必需的吗？用户可能会很高兴计算机正在勾选方框，即使这需要一些时间，否则用户将不得不自己做。

这是一个示例，我们将其分成 100 个复选框的 block ，每个 block 以 1000 毫秒的间隔完成。

const chunkSize=100;
const intervalBetweenChunksMs = 1000;
for (var i=0; i < theForm.circSelected.length ; i+=chunkSize) { 
  console.log("Creating chunk starting at",i)
  setTimeout(function(start){for(var j=start; j<Math.min(i+chunkSize,33); j++) 
    { 
      console.log("Doing item number", j);
      theForm.circSelected[j].checked = checkval;

    }
  }(i),(1 + theForm.circSelected.length/chunkSize)*intervalBetweenChunksMs ) 
}

如果原则上可行，您可能希望尝试更小的间隔，以便在合理的时间范围内完成完整的“波浪”检查。

我输入了“1+”，以便第一个 block (从元素编号 0 开始)仅在一个间隔后出现。如果这在第一次可见更改之前引入了 Not Acceptable 滞后，则删除“1+”。