javascript - 要素の追加時にノックアウトの再バインドを停止

Question

observableArray をリストにバインドしています。

いくつかの要素を追加するたびに、リストが更新されます。

しかし、数回実行した後、実行中のスクリプトを停止/続行するスクリプト アラートが表示されます。

私は毎回50行をバインドしています（ID、名前のペア）。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) のサブスクライバーは、push ごとではなく 1 回だけ通知されるようになります。

詳細については、このリンクをご覧ください

そのアプローチを適用したにもかかわらず、まだパフォーマンスの問題がある場合。を使用して実行を多くの小さな断片に分割することで、この問題を回避できます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);