每个项目的 knockout.js 可观察数组推送延迟

Question

我有一个将项目推入界面的数组。现在，所有项目都以不透明的小动画同时显示。但是，我希望每个都一个一个地出现，并有一点延迟。好像他们是一个接一个地进来一样。

但是，我尝试的所有内容似乎仍然同时出现。我使用了rate limit，但这似乎没有帮助。下面是我的数组，我正在使用splice。我什至在 foreach 中使用了setTimeout。

 self.plays = ko.observableArray([]);

        self.update = function (period) {
             period.Plays.forEach(function (p, index) {
                        self.plays.splice(0, 0, p);
                    });
        };

CSS

.play-by-plays .play.flash,
    .line-scores .line-period.flash {
        transition: color 1s ease;
    }

    .play-by-plays .play,
    .line-scores .line-period {
        transition: color 1s ease;
    }

Answer 1

你说你试过setTimeout。你试过这样吗？

function ViewModel(){
  var self = this;
  self.plays = ko.observableArray();

  self.Periods = [{'letter':'a'},{'letter':'b'},{'letter':'c'}];

  self.update = function(){
    var counter = 0;
    self.Periods.forEach(function(letter){
      setTimeout(function(){
        self.plays.unshift(letter);
      }, counter);
      counter += 500;
    });
  };
  
  self.update();
}

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach: plays">
  <span data-bind="text: letter"></span>
</div>