Having trouble with ng-class not updating properly when using setTimeout in Angular?

Question

Having trouble with ng-class not updating properly when using setTimeout in Angular?

I am encountering an issue with my 'highlightBookmark' function that is supposed to change the background color of a list item after 2 seconds. However, it is not working as expected! The background color only changes when the function is called by a click event and not automatically after the specified time has passed.

Below is the code snippet:

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

The 'highlightBookmark' function takes an integer as input, finds the object at that position, and updates the 'class' property to true. For example, passing the number 1 to the function will update the 'class' property of the object at index 2 to true.

Although the 'highlightBookmark' function is being called after 2 seconds, the class does not get updated, resulting in no change in background color.

When I call the function using a click event, it works perfectly.

HTML file

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

The list item in the HTML file has the ng-class property that should be changed after 2 seconds.

You can view a similar code on Codepen where a button's color changes upon click but doesn't change after setTimeout, even though the method is called.

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

I would appreciate any help in resolving this simple issue.

javascript html css angularjs

Answer 1

Answer №1

If you're struggling with the vanilla setInterval function not updating scope variables, consider using the $interval API provided by Angular instead:

var interval = $interval(checkTime, 100);

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

Note that clearInterval(interval) should be changed to interval.cancel()
Don't forget to inject it as a dependency.
A valid point made by charlietfl: Remember to cancel the interval if the scope is destroyed.

Insert this code snippet into your controller:

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

For more information, visit: https://docs.angularjs.org/api/ng/service/$interval

Answer 2

If you're struggling with the vanilla setInterval function not updating scope variables, consider using the $interval API provided by Angular instead:

var interval = $interval(checkTime, 100);

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

Note that clearInterval(interval) should be changed to interval.cancel()
Don't forget to inject it as a dependency.
A valid point made by charlietfl: Remember to cancel the interval if the scope is destroyed.

Insert this code snippet into your controller:

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

For more information, visit: https://docs.angularjs.org/api/ng/service/$interval

Answer 3

Answer №2

setInterval and setTimeout don't operate within the Angular digest cycle, making them difficult for Angular to track.

An alternative is to utilize the $timeout service in your controller, which provides the same timeout functionality while remaining under Angular's observation.

Answer 4

setInterval and setTimeout don't operate within the Angular digest cycle, making them difficult for Angular to track.

An alternative is to utilize the $timeout service in your controller, which provides the same timeout functionality while remaining under Angular's observation.

Answer 5

Answer №3

It is recommended to use angular $timeout over setInterval or setTimeout.

Reasons for using $timeout:

These functions do not trigger a $digest on the $scope variables;
$timeout consumes less memory while achieving the same result as $interval.

This is how your controller section will be structured:

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

Do not forget to inject the $timeout as a dependency in your controller.

P.S.

The provided code will set a default bookmark after 2 seconds. For further improvements, additional details about the player's behavior are required. Provide more context so that adjustments can be made accordingly.

Consider implementing "controller as" approach. Refer to John Papa's article on this topic for more insights:

If you wish to toggle background on click event, utilize the following code snippet which ensures proper handling of multiple li elements:

<div ng-app="classApp" ng-controller="classCtrl">
   <ul id = "bookmarkList">
    <li ng-repeat="bookmark in markers" ng-class="{'active': selectedMarker === bookmark}" ng-click="jumpTo(bookmark)">{{bookmark.text}}</li>
   </ul>
</div>

$scope.selectedMarker = null;

function highlightBookmark(marker) {
   $scope.selectedMarker = marker;
}

$timeout(checkTime, 2000);

function checkTime(){
   highlightBookmark($scope.markers[0])
}

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

See you later!

Answer 6

It is recommended to use angular $timeout over setInterval or setTimeout.

Reasons for using $timeout:

These functions do not trigger a $digest on the $scope variables;
$timeout consumes less memory while achieving the same result as $interval.

This is how your controller section will be structured:

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

Do not forget to inject the $timeout as a dependency in your controller.

P.S.

The provided code will set a default bookmark after 2 seconds. For further improvements, additional details about the player's behavior are required. Provide more context so that adjustments can be made accordingly.

Consider implementing "controller as" approach. Refer to John Papa's article on this topic for more insights:

If you wish to toggle background on click event, utilize the following code snippet which ensures proper handling of multiple li elements:

<div ng-app="classApp" ng-controller="classCtrl">
   <ul id = "bookmarkList">
    <li ng-repeat="bookmark in markers" ng-class="{'active': selectedMarker === bookmark}" ng-click="jumpTo(bookmark)">{{bookmark.text}}</li>
   </ul>
</div>

$scope.selectedMarker = null;

function highlightBookmark(marker) {
   $scope.selectedMarker = marker;
}

$timeout(checkTime, 2000);

function checkTime(){
   highlightBookmark($scope.markers[0])
}

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

See you later!

Answer 7

Answer №4

let myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function ($scope, $timeout) {
    $scope.isClicked = false;
    $scope.clickButton = function () {
        $scope.isClicked = !$scope.isClicked;
    }

    function updateTime() {
        $scope.isClicked = !$scope.isClicked;
    }

    $timeout(updateTime, 2000)
});

Answer 8

let myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function ($scope, $timeout) {
    $scope.isClicked = false;
    $scope.clickButton = function () {
        $scope.isClicked = !$scope.isClicked;
    }

    function updateTime() {
        $scope.isClicked = !$scope.isClicked;
    }

    $timeout(updateTime, 2000)
});

Having trouble with ng-class not updating properly when using setTimeout in Angular?

Answer №1

Answer №2

Answer №3

Reasons for using $timeout:

P.S.

Answer №4

Similar questions

What is the reason behind BehatMinkElementNodeElement:setValue function removing dashes in the input value?

Having trouble getting my list items to display on individual lines within the foreach loop. It just doesn't seem to be working as expected

Manipulate the DOM elements within the ng-repeat directive

JavaScript React: A notification is appearing in the console indicating that my React Hook useEffect is missing dependencies

Utilizing the ng-if directive to choose the second element within an iteration of an ng-repeat loop

Automatically refresh a table within a webpage with updated database information without the need to manually refresh the

Using JavaScript to Retrieve Image Sources

Switching the Visibility of Bootstrap Navbar Collapse when Changing Views using AngularJS

Tips for locking the table header and left column in place without any border flickering

Scope of the variable not defined within the ajax callback

What is the best way to reorganize an item in JavaScript?

Retrieving Data with AJAX: Submitting Data and Retrieving Response

Learn the process of creating various themes with Tailwind CSS

Transform improperly formatted strings into a date data type

What are the steps to creating a dynamic, layered column design using HTML?

I am currently in the process of testing my Angular controller using Jasmine, however, encountering an issue with the error message: [$injector:modulerr]

Transforming a JSON object property value from an array into a string using JavaScript

In React, the `context` is consistently an empty object

Merge a handful of regex patterns

Try implementing toggleClass() in the accordion feature rather than addClass() and removeClass()