我有一个功能“ 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