按放置金额附加订购商品

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也是整数.如果附加速度低于±300毫秒 - 一切都运行良好.如果快速追加我得到这个结果:

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

Answer 1

1. 重构

首先，回调return内.each不起作用。它只是破坏了当前的迭代，而不是所有的循环。如果你想中断循环，你应该使用简单的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). 但是，如果进程以您无法更改的方式初始化，并且 50ms 是固定间隔，那么您可以run通过lodashthrottle或jquerythrottleplugin来保护调用：

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

setInterval举例来说，您需要在转发器初始化逻辑中将初始版本替换run为节流版本 ( ) 。throttledRun这意味着run自上次执行后经过 300ms 间隔后才会执行run。