我有一个函数“highlightBookmark”,它应该在 2 秒后更改列表项的背景颜色。但它不起作用! 仅当单击事件调用该函数时,它才会更改“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);
}
高亮功能,接受一个整数,在那个位置寻找对象并更新设置“类”参数为真。例如,如果我将数字 1 传递给函数,它将在索引 2 处查找对象并将“类属性”设置为 true。
然后,2 秒后我想调用 highlightBookmark 函数。它被调用但它不更新类,因此背景不更新。
我用点击事件调用了相同的方法,它起作用了。
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()
- 另外不要忘记将它作为依赖项注入(inject)。
- charlietfl 的公平点:如果范围被破坏,也取消间隔。
将它放在你的 Controller 中:
$scope.$on("$destroy", function( event ) {
interval.cancel( timer );
});
关于javascript - 为什么 ng-class 不使用 setTimeout 进行更新? Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41682120/