使用敲除映射插件进行节流答案

【问题标题】：Throttling with knockout mapping plug使用敲除映射插件进行节流
【发布时间】：2012-04-13 16:27:23
【问题描述】：

我在使用 IE8 的淘汰赛映射插件时遇到问题。我们的情况是我们发送了所有可以显示给客户的可能记录。然后我们在客户端为响应式系统处理所有分页和过滤。

目前，我们正在发送一个包含 250 条记录的列表，以通过 jQuery ajax 在基于 jQuery 模板的网格中显示。当我们调用 ko.mapping.fromJS（不是 fromJSON 函数）来映射对象时，我们会从 IE8 收到“脚本耗时过长”的消息。在 FF 和 Chrome 中不会发生，因为它们的 java 脚本执行得更快。

是否有直接限制映射的方法？这是一个长期问题，因为我们可能会遇到有将近 1000 条记录要发送给客户的情况。

【问题讨论】：

标签： jquery knockout.js knockout-mapping-plugin

【解决方案1】：

IE 是个淘气的小东西......不是吗。

在使用 javascript 进行数据绑定时，如果要进行重要的 UI 更新，我会执行以下操作。

function ajaxCallback(listOfDataItems){

  var addToUiFunction = function(item){
     // add it to the ko.observable array which is data bound to the UI
     myDataBoundArray.push(item);
  };

  for (var i = 0, arrayLength = listOfDataItems.length; i < arrayLength; i++){
    var temp = listOfDataItems[i];

    //create an immediately executing function to close around
    //the item that returns a function to call at a later date.
    var tempFunction = (function(){
      var item = temp;
      return function() { addToUiFunction(item) };
    })();

    setTimeout(tempFunction, 0);

  }
}

这里发生的事情是我一次只向 UI 添加一个项目。我使用延迟为 0 的 setTimeout 来推迟单个 add 的执行，直到当前调用完成。这意味着非常短的工作单元不会让您的浏览器超时。

附言代码有点狡猾，只是想说明一点。

【讨论】：

您可能应该分批执行您的项目，而不是更新单个项目，因为每次您都强制 DOM 进行重新布局，这也很昂贵。

【解决方案2】：

我们也遇到了同样的问题。我们的视图模型有一个太多的计算 observables，这导致脚本运行得更慢。删除不必要的订阅可能会让您摆脱这个问题。

【讨论】：

【解决方案3】：

我知道这不是一个理想的答案，但如果您的情况允许，您总是可以不映射内部项目。前任。如果您的 ajax 调用返回 1000 人并且您希望您的 UI 更新并显示所有这些人，您可以让您的视图模型有一个 observableArray 的原始人 js 对象（而不是他们的 ko 映射等效项）。如果您在 observableArray 中添加或删除项目，它会在 UI 上正确显示，但如果需要订阅每个人的所有属性的所有属性更改事件，它将无济于事。

通常，当我提取这么多项目时，它是用于报告的，因此我不需要自己编辑项目，但需要根据过滤条件从报告中添加/删除行。

【讨论】：