javascript - 视频 'timeupdate' 监听器忘记值

Question

我有一个 html5 视频事件监听器，它应该等到正确的时间，然后在用户参加测验时暂停视频。第一个“类(class)”效果很好，第二个视频似乎也为听众添加了正确的暂停时间。但是在播放第二个视频时，它总是在 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在每次加载新类(class)时触发，它绑定(bind)ended事件以及timeupdate 通过 setPause() 监听，然后加载并播放视频。这个想法是setPause设置视频到达时自动暂停的时间，然后第二个$watch等到所有问题都被回答后再播放视频的剩余部分(通常是祝贺信息)

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 中，在给定的函数中，在哪里声明变量和函数并不重要；它们总是被“提升”到顶部。因此，即使您在调用 removeEventListener 之后 编写了 timeListener 函数，您的代码的行为就像您在 的顶部声明它一样暂停。这就是为什么在运行任何其他代码之前声明所有变量和函数通常是个好主意(如果不这样做，JSLint 会给您带来困难)。异常(exception)情况是您将函数显式分配给变量。

您可以通过在 pause 的 timeListener 外部 声明来解决此问题，因此它将始终是对前一个实例的引用。像这样:

var timeListener;
function pause(time) {
    //timeCache is unnecessary
    var video = $("video").get(0),
        end = time + 0.3; //cache this so you don't have to add every time

    if (timeListener) {
        //remove previous timeListener function, if there is one
        video.removeEventListener('timeupdate', timeListener, false);
    }

    //make a new function and save it for later as timeListener
    timeListener = function () {
        if (video.currentTime >= time && video.currentTime < end) {
            video.pause();
        }
    };
    video.addEventListener('timeupdate', timeListener);
};