jQuery视频悬停优化动态选择器答案

【问题标题】：jQuery video hover optimising dynamic selectorsjQuery视频悬停优化动态选择器
【发布时间】：2016-11-01 07:41:12
【问题描述】：

我正在做一些事情，用户将鼠标悬停在视频上以触发它播放。当他们将鼠标悬停在另一个视频上时，这个新视频开始播放并停止其他视频。

我正在使用 Vimeo 和他们的 Froogaloop 库（这里不太相关，也可能是视频标签，主要关注选择器的缓存）。

这段代码运行良好，但我知道它没有得到应有的优化，每次调用悬停函数时它都会使用多个选择器，我不想这样做。我可以改进此代码以使其不执行此操作吗？或者现在在现代浏览器中继续像这样调用 jQuery 选择器可以吗？

function hoverVid() {
  var frame = $(this).find('iframe');
  var player = $f(frame[0]);
  player.api('play');

  var vids = $('.vid-row iframe').not(frame);
  vids.each(function(index) {
    var frame = $(this);
    var player = $f(frame[0]);
    player.api('pause');
  });
}

$('.vid-row').hover(hoverVid);

干杯：]

【问题讨论】：

我看到的唯一改进是在播放新的悬停之前暂停所有视频。 Here你可以看到你的jsbin更新了
干杯@GerardCuadras，所以更新只是为了确保我假设的暂停播放没有重叠？
正是@00-BBB 这样您就可以确保不会暂停必须播放的视频。但在优化方面将是相同的。还要检查我是否更改了var vids = $('.vid-row iframe').not(frame);。
啊，我明白了，这是我的updated bin

标签： javascript jquery html performance caching

【解决方案1】：

我对其进行了一些改进 - 根据@GerardCuadras 的评论，只需暂停所有视频，然后播放所需的视频，就无需使用 .not() 过滤器。

这让我可以缓存 iframe 列表。我还优化了选择器以使用 #id 和 .find()。

JSBin

var vidz = $('#vidz').find('iframe');

function hoverVid(e){

  vidz.each(function( index ){
    var frame = $(this);
    var player = $f(frame[0]);
    player.api('pause');
  });

  var frame = $(this).find('iframe');
  var player = $f(frame[0]);
  player.api('play'); 
}

$('.vid-row').hover(hoverVid);

【讨论】：