按放置金额附加订购商品

Question

我正在使用此功能按金额按顺序添加新项目。该功能每30-50ms调用一次。

interface MyFile extends File {
    lastModified: any;
}

let myFile = <MyFile>originalFile;
let lm = myFile.lastModified;

var insertBefore = false; container.find('.roll-user-row[data-user-id="' + user_data.id + '"]').remove(); container.children().each(function () { var betContainer = $(this), itemAmount = $(this).attr('data-amount'), betId = $(this).attr('data-user-id'); if (itemAmount < betData.totalAmount) { insertBefore = betContainer; return false; } }); if (insertBefore) { $(template).insertBefore(container); } else { container.prepend(template); } 是整数，itemAmount = $(this).attr('data-amount')也是整数。如果附加速度低于±300毫秒 - 一切都运行良好。如果快速追加，我得到这个结果：

那甚至没有关闭我想要的 - 这是随机的。怎么解决这个问题？

Answer 1

<强> 1。重构

首先，return回调中的.each不起作用。它只是打破了当前的迭代，而不是所有的循环。如果要中断cylce，则应使用简单的for循环和break语句。然后，我建议尽可能少地致电$()，因为is expensive。所以我建议对你的函数进行以下重构：

function run() {
  container.find('.roll-user-row[data-user-id="' + user_data.id + '"]').remove();

  var children = container.children();
  for (var i = 0; i < children.length; i++) {
    var betContainer = $(children[i]); // to cache children[i] wrapping
    var itemAmount = betContainer.attr('data-amount');
    var betId = betContainer.attr('data-user-id');

    if (itemAmount < betData.totalAmount) {
      $(template).insertBefore(container);
      return; // instead of "break", less code for same logic
    }
  }

  container.prepend(template); // would not be executed in case of insertBefore due to "return"
}

<强> 2。节流

要运行50毫秒的重复过程，您使用setInterval(run, 50)之类的内容。如果你需要确定run已经完成，这是300毫秒延迟，那么你可以只使用setInterval(run, 300)。但是，如果流程以您无法更改的方式初始化，并且50ms是固定间隔，那么您可以通过lodash throttle或jquery throttle plugin保护run来电：

var throttledRun = _.throttle(run, 300); // var throttledRun = $.throttle(300, run);
setInterval(throttledRun, 50);

setInterval仅作为示例，您需要在转发器初始化逻辑中替换带有限制版本（run）的初始throttledRun。这意味着自上次run执行以来300ms间隔后才会执行run。

Answer 2

我只是在这里发布方法，如果我的理解是正确的，那么我将发布一个代码。我首先想到的是这是'Virtual DOM' concept。这是你可以做的，

1. 仅使用高频率的随机函数调用来维护像对象一样的数据结构。不要依赖DOM更新。

2. 然后使用频率较低的setInterval重复函数调用从该数据结构重绘（或更新）DOM。

我不确定您是否有任何理由不采用这种方法，但这将是在时间关键用例中处理DOM的最有效方法。