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

Question

我有一个网页,其中一个视频元素嵌套在div class ="video-container"中,还有一个div class ="video-control-bar",我正在使用JQuery来制作动画.我也使用setInterval来查询视频元素的currentTime,并在视频控制栏中包含的进度条中反映出来.

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中的一个错误,因为它类似于我在此处提交的问题.

我真的不知道我的工作方式是否有问题,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)
            });
}