Chrome 中无法解释的行为，是我的代码还是他们的代码？

Question

我的网页包含一个嵌套在 div class="video-container" 中的视频元素以及一个 div class="video-control-bar"，我使用 JQuery 来制作动画。我还使用 setInterval 来查询视频元素的 currentTime 并将其反映在 video-control-bar 中包含的进度条中。

JavaScript：

$(function(){
  $(".video-container").each(function(){
    player_init($(this))
  })
})

function player_init(self)
{
  setInterval(function(){
    var video = self.find("video")[0]
    self.find(".video-control-bar").find(".video-position").find("input").val(video.currentTime / video.duration)
    self.find(".video-control-bar").find(".video-position").find("progress").val(video.currentTime / video.duration)
  }, 500)
  self.hover(function(){
    self.find(".video-control-bar").stop().animate({bottom: "0px"}, 25)
  }, function(){
    self.find(".video-control-bar").stop().animate({bottom: "-39px"}, 350)
  })
}

问题？好吧，在 Chrome 中，如果我加载页面，我的 setInterval 函数会像预期的那样每 500 毫秒调用一次，直到我将鼠标悬停在播放器上，从而导致控制栏动画。之后不再调用我的 setInterval 函数。

但是如果我点击刷新，页面会重新加载，我可以将鼠标悬停在我想要的任何地方，一切都会继续正常工作。但是只有如果我通过刷新加载页面。

这在 Firefox 中不会发生。我怀疑这可能是 Chrome 中的错误，因为它类似于我提交的问题 here。

我真的不知道这是我做事方式的问题、JQuery 的问题还是 Chrome 中的错误。我真的不在乎是谁的错误，我只想让事情正常工作。

谢谢。

Answer 1

self.hover() 完成后可能会返回，从而结束 player_init()

尝试将超时功能与悬停功能分开，如下所示：

$(function(){
    $(".video-container").each(function(){
        $this = $(this);  //small optimization
        hover_init($this);
        player_init($this);

        });
});
function player_init(self){
  var a = self.find(".video-control-bar .video-position");
  var video = self.find("video")[0]
  setInterval(function(){
    a.find("input").val(video.currentTime / video.duration)
    a.find("progress").val(video.currentTime / video.duration)
  }, 500)
}
function hover_init(self){
    selfhover(
            function(){
                self.find(".video-control-bar").stop().animate({bottom: "0px"}, 25)
            }, function(){
                self.find(".video-control-bar").stop().animate({bottom: "-39px"}, 350)
            });
}

Answer 2

self.hover(function(){
    self.find(".video-control-bar").stop().animate({bottom: "0px"}, 25)
}, function(){
    self.find(".video-control-bar").stop().animate({bottom: "-39px"}, 350)
})

替换或删除 stop()。这可能会解决它。