我有一个功能“ highlightBookmark”,应在2秒钟后更改列表项的背景颜色。但这不起作用!!!
仅当通过click事件调用该函数时,它才会更改“ li”背景。超时后它不会自动更改它,即使它实际上调用了该函数。

这是我的代码:

Controller.js

//markers
$scope.markers = [
    {
        time: 9.5,
        text: "Bookmark 1",
        class: false
    },
    {
        time: 106,
        text: "Bookmark 2",
        class: false
    }
]

$scope.currentBookmark = -1;

function highlightBookmark(index) {
    $scope.markers[index].class = true;
}

var interval = setInterval(checkTime, 100);

function checkTime(){
    if(Math.floor(player.currentTime()) == 2){
        highlightBookmark(1)
        clearInterval(interval);
    }
}

$scope.jumpTo = function (index) {
    highlightBookmark(index);
}


高亮函数使用一个整数,在该位置查找对象,并将设置的“ class”参数更新为true。例如,如果我将数字1传递给函数,它将在索引2处查找对象,并将“类属性”设置为true。

然后,两秒钟后,我想调用HighlightBookmark函数。它被调用,但是它不会更新类,因此后台也不会更新。

我称它与click事件相同,并且有效。

HTML文件

<ul id = "bookmarkList">
    <li ng-repeat="bookmark in markers" ng-class="{'active': bookmark.class}" ng-click="jumpTo($index)">{{bookmark.text}}</li>
</ul>


这个li具有我要在2秒后更改的ng-class属性。

这是我在Codepen上执行的类似代码的链接。它会在单击时更改按钮的颜色,但是即使调用方法时也不会在setTimeout上更改

https://codepen.io/Octtavius/pen/wgzORv

有人可以帮助解决这个简单的问题吗?

最佳答案

普通setInterval函数不会更新作用域变量。尝试使用Angular的$interval API:

var interval = $interval(checkTime, 100);

function checkTime(){
    if(Math.floor(player.currentTime()) == 2){
        highlightBookmark(1)
        interval.cancel();
    }
}



注意clearInterval(interval)更改为interval.cancel()
也不要忘记将其作为依赖项注入。
charlietfl的公平点:如果范围被破坏,也取消间隔。


将其放在您的控制器中:

$scope.$on("$destroy", function( event ) {
    interval.cancel( timer );
});


更多信息:https://docs.angularjs.org/api/ng/service/$interval

10-07 19:07
查看更多