Необъяснимое поведение в Chrome, это мой код или их?

У меня есть веб-страница с видеоэлементом, вложенным в видео-контейнер div class=, а также панель видео-контроля div class=, которую я использую для анимации JQuery. Я также использую setInterval для запроса текущего времени видеоэлемента и отражения этого в строке выполнения, содержащейся в панели управления видео.

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. Мне действительно все равно, какая ошибка, я просто хочу, чтобы все работало.

Спасибо.

Ответ 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)
            });
}

Ответ 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(). Это может исправить это.