Необъяснимое поведение в 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 больше не обращаются.

HOWEVER Если я нажму кнопку Обновить, страница перезагрузится, и я могу навести курсор мыши на все, что захочу, и все будет работать правильно.Но только , если я загружаю страницу через обновление.

Этого не происходит в Firefox.Я подозреваю, что это может быть ошибка в Chrome, так как она похожа на проблему, которую я представил здесь .

Я действительно понятия не имею, если это проблема с тем, как я делаю вещи, проблема с JQuery или ошибка в Chrome.Мне действительно все равно, чья это ошибка, я просто хочу, чтобы все заработало.

Спасибо.

Answer 1

self.hover () может возвращаться после завершения, таким образом, заканчивая player_init ()

Попробуйте что-то, что отделяет функцию timeout от функции hover, например:

$(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)
})

заменить или снять ограничитель ().Это может это исправить.