javascript - 使用 knockout 逐步加载视频元数据数组

Question

我的页面需要显示 n 个视频预览的网格。浏览器与任何给定域只能有大约 5-6 个事件连接。为了防止“等待套接字连接...”问题，我尝试逐步加载视频元数据。

我有以下内容:

 <!-- ko foreach: videos() -->
  <video data-bind="attr: {src: mediaPath, preload: $parent.preloadCount() > $index() ? 'metadata' : 'none'}, event: {loadedmetadata: $parent.incrementPreloadCount}"></video>
 <!--/ko-->

在我的 View 模型中:

    vm.preloadCount = ko.observable(4);
    vm.incrementPreloadCount = function () {
        feedVm.preloadCount(feedVm.preloadCount() + 1);
    };

这个想法是，每次加载视频的元数据时，loadedmetadata 事件都会触发一个增量，逐渐将none 切换到metadata。

问题是我的视频会随着每次增量而重新评估，每次preloadCount更新时都会重新获取src。

如何防止之前“切换”的视频被重新评估？我可以在这里求助于相对简单的 JS 解决方案，但如果可以的话，我想利用 knockout 。

Answer 1

map 为其函数提供第二个参数，它是正在操作的元素的索引。您可以将其用作返回数组映射的计算中的 $index 的替代品。

创建一个计算来处理 preload 属性值应该可以防止您的视频元素被触摸，除非该计算的值发生变化。

const vm = {
  arr: ['one', 'two', 'three', 'four', 'five'],
  preloadCount: ko.observable(0)
};

vm.videos = ko.computed(() => vm.arr.map((v, i) => ({
  v,
  i,
  preload: ko.computed(() => vm.preloadCount() > i ? 'metadata' : 'none')
})));

ko.applyBindings(vm);

setInterval(() => vm.preloadCount(1 + vm.preloadCount()), 1200);

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