javascript - 停止对元素添加的淘汰赛重新绑定

Question

我将一个 observableArray 绑定到一个列表。

每当我添加一些元素时，列表都会更新。

但是在我做了几次之后，一个脚本警报即将停止/继续运行脚本。

我每次只绑定 50 行（Id，Name 对）。我认为 ko 一次又一次地绑定列表。

可以阻止吗？有人可以帮我吗？

Answer 1

您遇到的问题是由于 javascript 的单线程性质造成的。如果有一个函数需要很长时间执行，浏览器会警告用户是否终止它，以防止它主导浏览器的执行。在您的情况下，我猜您正在使用push函数添加许多行，这会导致每个项目的 DOM 更新并花费大量时间。要优化它，请尝试ko.utils.arrayPushAll：

 var yourArray = ko.observableArray();    
 //assume yourArray here is your observableArray
 ko.utils.arrayPushAll(yourArray(), data);//data here is the array you need to add to yourArray 
 yourArray.valueHasMutated();//this line notifies the subscribers to update

这将确保 observableArray (yourArray) 的订阅者只收到一次通知，而不是每次推送。

有关更多信息，请查看此链接

万一即使您应用了该方法，您仍然存在性能问题。您可以通过使用setTimeout. 像这样：

var yourArray = ko.observableArray(); 

var totalItem = data.length;
var itemPerExecution = 20; //process only 20 items in 1 execution
var processedItem = 0; 
setTimeout(function generateRows(){
      var smallData = data.slice(processedItem,itemPerExecution);
      ko.utils.arrayPushAll(yourArray(), smallData);
      yourArray.valueHasMutated();

      processedItem+=itemPerExecution;
      if (processedItem < totalItem ){
          setTimeout(generateRows,0);
      }
},0);