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>

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

knockout.js observable array push delay on each item

javascript

arrays

css-animations

knockout.js