Question

我正在使用视频滑块，其中以下视频在循环中恰好在上一个结束之前开始。同时，我需要更新每个进度条。下面的代码有效，但是Chrome正在刻录我的Macbook。我做错了吗？如何提高性能？有免费的幻灯片，视频没有loop =“ true”属性。我只是通过播放第一个视频来启动滑块。

videos.on('timeupdate', function () {
    var progress = this.currentTime / this.duration * 100 + '%';
    $(this).closest('.slide').find('.js-video-progress').width(progress);
    if ((this.currentTime * 1000 + 1000) > this.duration * 1000) {
        if ($(this).closest('.slide').next('.slide').length) {
            $(this).closest('.slide').next('.slide').addClass('is-swiped').find('video')[0].play();
        } else {
            $('.slide').eq(0).addClass('is-swiped').find('video')[0].play();
        }
    }
});

Answer 1

timeupdate可能会以高速率（可能比屏幕刷新率更快）触发，因此您在其中所做的任何事情都必须尽可能轻。

jQuery的方法每次调用时都会做很多事情，并且总是返回新的对象，这些对象很快会污染您的所有内存，从而迫使GarbageCollector每次都出现。因此，不要两次调用相同的函数，而是将结果存储在变量中。

以下是将每个重用对象存储在处理程序本身中的更好的方法：

videos.on('timeupdate', function () {
    var time = this.currentTime, // it's a getter function, store
    var dur = this.duration;
    var progress = time / duration * 100 + '%';
    var $this = $(this); // store
    var $slide = $this.closest('.slide');
    var $progress = $slide.find('.js-video-progress');
    var $slide_next;
    $progress.width(progress);
    if ((time * 1000 + 1000) > dur * 1000) {
        $slide_next = $slide.next('.slide');
        if ($slide_next.length) {
           $slide_next
              .addClass('is-swiped')
              .find('video')[0]
              .play();
        } else { 
            $slide.eq(0)
              .addClass('is-swiped')
              .find('video')[0]
              .play();
        }
    }
});

但就我个人而言，我认为它甚至会更深入，冒着冗长的风险，并将所有需要的对象存储在一个静态对象中，我将在处理程序中查找该对象：

videos.each(function attach_data() {
  var $this = $(this);
  var $slide = $this.closest('.slide');
  var $progress = $slide.find('.js-video-progress');
  var $video = $slide.eq(0).find('video');
  var $slide_next = $slide.next('.slide');
  var $next_video = $slide_next.find('video');
  $this.data('$tree', {
    slide: $slide.eq(0),
    progress: $progress,
    video: $video,
    slide_next: $slide_next,
    video_next: $video_next
  })
})
.on('timeupdate', function () {
    var time = this.currentTime;
    var dur = this.duration;
    var progress = time / duration * 100 + '%';
    // retrieve our stored object
    var $tree = $(this).data('$tree');
    $tree.progress.width(progress);
    if ((time * 1000 + 1000) > dur * 1000) {
        if ($tree.slide_next.length) {
           $tree.slide_next.addClass('is-swiped');
           $tree.next_video[0].play(); // you may want to add a check the <video> really exists
        } else { 
           $tree.slide.addClass('is-swiped');
           $tree.video[0].play();
        }
    }
});

视频循环效果不佳

1 个答案: