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>

每个项目上的基因敲除观察到的数组推送延迟

1 个答案: