Javascript 为什么ng类不使用setTimeout更新？有棱角的

我有一个函数“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);
}

highlight函数接受一个整数，在该位置查找对象，并将set'class'参数更新为true。例如，如果我将数字1传递给函数，它将在索引2处查找对象，并将“class属性”设置为true

然后，2秒钟后，我想调用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>

{{{bookmark.text}

此li具有我想在2秒后更改的ng类属性

这里有一个链接，指向我在codepen上编写的类似代码。它会在单击时更改按钮颜色，但即使调用了该方法，在setTimeout时也不会更改

---

有人能帮助解决这个简单的问题吗？

普通的

setInterval

函数不更新范围变量。通过以下方式尝试使用

$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 );
});

---

更多信息：

香草

setInterval

函数不更新范围变量。通过以下方式尝试使用

$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 );
});

---

更多信息：

setInteral和setTimeout在角度摘要周期之外运行，因此角度摘要无法正确拾取它们

---

考虑在控制器中使用$timeout对象——这提供了超时功能，但允许angular监视它。

setInteral和setTimeout在angular摘要周期之外运行，因此angular无法正确拾取它们

var classApp = angular.module('classApp', []);

classApp.controller('classCtrl', function ($scope, $timeout) {
    $scope.isActive = false;
    $scope.activeButton = function () {
        $scope.isActive = !$scope.isActive;
    }

    function checkTime() {
        $scope.isActive = !$scope.isActive;
    }

    $timeout(checkTime, 2000)
});

---

考虑在控制器中使用$TimeOutlook对象——这给了您超时功能，但允许角度来监视它。

< P>您应该考虑使用角<代码> $TimeOut/<代码>，而不是<代码> StimoValue或<代码> SETTIMEOUT < /P>

var classApp = angular.module('classApp', []);

classApp.controller('classCtrl', function ($scope, $timeout) {
    $scope.isActive = false;
    $scope.activeButton = function () {
        $scope.isActive = !$scope.isActive;
    }

    function checkTime() {
        $scope.isActive = !$scope.isActive;
    }

    $timeout(checkTime, 2000)
});

因为：

此函数不包含

$digest

变量

$scope

$timeout

在这种情况下，执行与

$interval

完全相同的操作需要更少的内存

---

因此，控制器的这一部分将如下所示：

//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;
}

$timeout(checkTime, 2000);

function checkTime(){
    highlightBookmark(1);
}

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

---

记住将

$timeout

作为依赖项注入控制器中

附笔。 此代码将在2秒后标记为默认值，您没有提供足够的详细信息，因此我可以知道

播放器

正在做什么。因此，如果你想改善这一点，请提供更多细节，我们可以做到这一点

你应该考虑使用“控制器AS”。这里有一个链接到约翰·帕帕关于它的文章

如果你想

切换
点击事件的背景，你应该使用这个代码。因为您所做的只是添加背景，而不是从其他
li
中删除。为此，我们需要稍微修改
html
和
controller
：


 Cya. < /P> < P>应考虑使用角<代码> $TimeOut/<代码>而不是<代码> StimeValue<代码>或<代码> SETTIMEOUT < /P>
因为：
此函数不包含
$digest
变量
$scope

$timeout
在这种情况下，执行与
$interval
完全相同的操作需要更少的内存

因此，控制器的这一部分将如下所示：

//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;
}

$timeout(checkTime, 2000);

function checkTime(){
    highlightBookmark(1);
}

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


记住将
$timeout
作为依赖项注入控制器中

附笔。
此代码将在2秒后标记为默认值，您没有提供足够的详细信息，因此我可以知道
播放器
正在做什么。因此，如果你想改善这一点，请提供更多细节，我们可以做到这一点

你应该考虑使用“控制器AS”。这里有一个链接到约翰·帕帕关于它的文章

如果你想
切换
点击事件的背景，你应该使用这个代码。因为您所做的只是添加背景，而不是从其他
li
中删除。为此，我们需要稍微修改
html
和
controller
：


Cya.
可能还希望在范围被销毁时取消它。可能还希望在范围被销毁时取消它