按放置的数量追加订购的项目

Question

我使用这个函数按金额顺序追加新项目。此函数每30-50ms调用一次。

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'）是整数，betData.totalAmount也是整数。如果附加速度低于±300ms，则一切正常。在快速追加的情况下，我得到以下结果：

这甚至不是我想要的——这是随机的。如何解决这个问题？

Answer 1

我只是在这里发布方法，如果我的理解是正确的，那么我将发布一个代码。读到这里，我首先想到的是“虚拟DOM”的概念。这是你能做的，

>

使用高频率的随机函数调用仅用于维护数据结构（如对象）。不要依赖DOM更新。

然后使用一个频率低得多的setInterval重复函数调用从该数据结构中重新绘制（或更新）DOM。

我不确定有什么理由不能采用这种方法，但这将是在时间关键型用例中处理DOM最有效的方法。

Answer 2

1.重构

首先，返回中的。每个回调都不起作用。它只是打断了当前的迭代，而不是整个循环。若要中断循环，应使用简单for循环和break语句。然后，我建议尽量少打电话给$（），因为这很昂贵。因此，我建议对您的函数进行以下重构：

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）。但是如果进程以您无法更改的方式初始化，并且50毫秒是固定的时间间隔，那么您可以通过lodash throttle或jquery throttle插件保护run调用：

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

setInterval只是一个例子，您需要在中继器初始化逻辑中将初始的run替换为限制版本（throttledRun）。这意味着自上一次执行run以来，只有经过300毫秒的间隔，才会执行run。