ionic中$interval 和 $apply()

Posted 2020-09-08 听不见的脚步声

media.addEventListener(‘timeupdate‘, function() {//监听视频播放时间
     if(media.currentTime>1){//如果视频播时间超过1秒      　　 $scope.scoreShow=true;//打分框弹出
　　　　　　console.log($scope.scoreShow);//true     };
 },true);

给一个视频 media 对象添加监听事件： timeupdate 时，回调函数正常执行，$scope.scoreShow也变成了true，但是在html页面上

<!--打分弹框-->
<div class="videoMessage" ng-show="scoreShow">
    <p>打个分，留下你的态度！</p>
        
    <p class="btns">
                <span ng-click="confirmScore()">确定</span>
                <span ng-click="ignoreScore()">无视</span>
        </p>
</div>                        

视频播放到1秒以后，打分弹框始终不显示，而且在页面的控制台去看打分弹框，display：none！important；

说明$scope.scoreShow事实上没有起作用。

很奇怪的一点是：

如果在同一个controller中有一行：$interval(function(){},0);

如下

media.addEventListener(‘timeupdate‘, function() {//监听视频播放时间
     if(media.currentTime>1){//如果视频播时间超过1秒
      　　 $scope.scoreShow=true;//打分框弹出
　　　　　　console.log($scope.scoreShow);//true
     };
 },true);

$interval(function(){},0);

打分弹框就会显示。

但是如果把$interval 换成原生代码setInterval , 打分弹框也不会显示。

***** 重点：

因此，推断：因为ionic不知道原生代码做了一些事情，所以不知道$scope.scoreShow改变了，要ionic知道需要用到$scope.$apply()把$scope.scoreShow=true包起来：

media.addEventListener(‘timeupdate‘, function() {//监听视频播放时间
     if(media.currentTime>1){//如果视频播时间超过1秒
             $scope.$apply(function(){
      　　         $scope.scoreShow=true;//打分框弹出
             });
     };
 },true);

这样$scope.scoreShow不只是变成了true，还真正起到作用了，打分弹框显示了。

备注 ：

　　引用 http://www.2cto.com/kf/201311/256848.html 里的一段话来解释：什么时候用$apply()

     那我们到底什么时候需要去调用$apply()方法呢？情况非常少，实际上几乎我们所有的代码都包在$scope.$apply()里面，像ng-click，controller的初始化，$http的毁掉函数等。在这些情况下，我们不需要自己调用，实际上我们也不能自己调用，否则在$apply()方法里面再调用$apply()方法会抛出错误。如果我们需要在一个新的执行序列中运行代码时才真正需要用到它，而且当且仅当这个新的执行序列不是被angular JS的库的方法创建的，这个时候我们需要将代码用$scope.$apply()包起来