Question

我有一个html5视频事件监听器，应该等到正确的时间，然后在用户参加测验时暂停视频。第一课＃39;工作正常，第二个视频也似乎添加了听众正确的暂停时间。但是在播放第二个视频时，它始终会在170秒处暂停，即第一个视频的暂停时间。

另外，当我查看Chrome浏览器的开发面板时，它实际显示timeCache，因为播放视频后立即还原回到之前的视频值;除非视频传递 170标记，否则它将使用230秒timeCache值。起初我以为这是因为旧的事件监听器仍然附着，但我已经消除了这种可能性，问题仍然存在。这是链接http://koreanwordgame.com/grammar/

var setPause = function (time) {
   var video = $("video").get(0);
   var timeCache = time;
   video.removeEventListener('timeupdate', timeListener, false);
   function timeListener (){
    if (video.currentTime >= timeCache && video.currentTime < (timeCache + 0.3)) {
        video.pause();
    }}
   video.addEventListener('timeupdate', timeListener);
};

每次加载新课程时都会触发指令中的第一个$watch，它会ended事件以及timeupdate侦听器通过setPause()绑定加载并播放视频。我们的想法是setPause设置视频到达时自动暂停的时间，然后第二个$watch等待所有问题都被解答，然后播放视频的其余部分（通常是祝贺消息）< / p>

app.directive('videoWatcher', function () {
return function (scope, video, attrs) {
    scope.$watch(attrs.videoLoader, function () {
        $(video[0]).bind('ended', function () {
            $(this).unbind('ended');
            if (!this.ended) {
                return;
            }
            scope.tutorialNumber++;
            scope.$apply();
            scope.loadFromMenu();
        });
        setPause(scope.currentTutorial.pause);
        video[0].load();
        video[0].play();
    });
    scope.$watch(attrs.congrats, function(){
        var cT = scope.currentTutorial;
        if (scope.questionNumber === cT.material.length){
            video[0].play();
            setTimeout(function () {
                video[0].play();
            }, 500);
        }
    });
};
})

Answer 1

每次调用pause函数时，都会创建timeListener函数的新实例。对timeListener的任何引用都是对您刚刚创建的引用的引用。因此，当您删除事件监听器时，您将删除新功能，而不是之前添加的功能。

在Javascript中，在给定的函数中，声明变量和函数的位置无关紧要;他们总是被“悬挂”到顶端。因此，即使您在调用timeListener 之后编写了removeEventListener函数，您的代码就会像在pause的顶部声明它一样。这就是为什么在运行任何其他代码之前声明所有变量和函数通常是个好主意（如果你不这样做，JSLint将给你带来困难）。例外情况是您将函数显式分配给变量。

您可以通过声明timeListener的{{1}} 外的来解决此问题，因此它始终是对前一个实例的引用。像这样：

pause

视频'timeupdate'监听器会忘记值

1 个答案: