Implementing $timeout within ng-init to execute a function that showcases various shapes at 2-second intervals

Question

Implementing $timeout within ng-init to execute a function that showcases various shapes at 2-second intervals

I'm trying to use $timeout in Angular 1 to call a function every 2 seconds using ng-init.

ng-init="$timeout(sc.displaySorted(), 2000)"

The sc.displaySorted() function displays 100 sorted shapes on the DOM. It works fine with ng-init, but I'm struggling to get it to refresh every 2 seconds. I've also tried using $route.reload and recursion without success.

This is the vm.displaySorted function:

vm.displaySorted = function() {
// Call generateFunc and pass a total of 50 shapes
var allShapes = generateFunc(50);
// Call sortingFunc with all shapes as argument
var sortedShapes = sortingFunc(allShapes);
for(i = 0; i < sortedShapes.length; i++) {
  var shape = sortedShapes[i]
  if(shape.type === "square") {
    vm.shapesToDisplay.push(sortedShapes[i]);
  }
  if(shape.type === "circle") {
    vm.shapesToDisplay.push(sortedShapes[i]);
  }
}

//end vm.displaySorted

javascript angularjs timeout

Answer 1

Answer №1

The solution you are seeking can be found in the $interval service. To use it, follow this example:

$interval(displaySorted, 2000)

Note the following:

You only need to include the function without calling it (without round brackets).
Avoid using
```
ng-init="$interval(sc.displaySorted, 2000)"
```
directly in your view as $interval is not accessible in the view but in the controller (a service provided by AngularJS). Therefore, create a function wrapper for the actual function. Refer to the complete sample code below.

angular
  .module('app', [])
  .controller('myctrl', function($interval) {
    var vm = this;
    vm.wizard = {
      displaySorted: fnDisplaySorted,
      init: fnInit
    }

    return vm.wizard;

    function fnInit() {
      $interval(fnDisplaySorted, 2000);
    }

    function fnDisplaySorted() {
      console.log('printing');
    }

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="myctrl as ctrl" ng-init="ctrl.init()">
</div>

Answer 2

The solution you are seeking can be found in the $interval service. To use it, follow this example:

$interval(displaySorted, 2000)

Note the following:

You only need to include the function without calling it (without round brackets).
Avoid using
```
ng-init="$interval(sc.displaySorted, 2000)"
```
directly in your view as $interval is not accessible in the view but in the controller (a service provided by AngularJS). Therefore, create a function wrapper for the actual function. Refer to the complete sample code below.

angular
  .module('app', [])
  .controller('myctrl', function($interval) {
    var vm = this;
    vm.wizard = {
      displaySorted: fnDisplaySorted,
      init: fnInit
    }

    return vm.wizard;

    function fnInit() {
      $interval(fnDisplaySorted, 2000);
    }

    function fnDisplaySorted() {
      console.log('printing');
    }

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="myctrl as ctrl" ng-init="ctrl.init()">
</div>

Answer 3

Answer №2

Utilize the $interval feature to achieve this functionality. Make sure to add it in the controller as shown in the example below.

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

app.controller('MyController', function MyController($scope, $interval) {
  this.displaySorted = function() {
    console.log("every 2 seconds");
  }
  this.runThis = function(){
    $interval(this.displaySorted, 2000);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController as sc' ng-app="myApp" ng-init="sc.runThis()">

</div>

Answer 4

Utilize the $interval feature to achieve this functionality. Make sure to add it in the controller as shown in the example below.

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

app.controller('MyController', function MyController($scope, $interval) {
  this.displaySorted = function() {
    console.log("every 2 seconds");
  }
  this.runThis = function(){
    $interval(this.displaySorted, 2000);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController as sc' ng-app="myApp" ng-init="sc.runThis()">

</div>

Implementing $timeout within ng-init to execute a function that showcases various shapes at 2-second intervals

Answer №1

Answer №2

Similar questions

Instructions for setting a default value for ng-options when dealing with nested JSON data in AngularJS

Unlimited scrolling: Fetching additional data via an Ajax request?

Vue Bootstrap Checkbox and <b-table> with <b-form-checkbox> components combine to provide a powerful and flexible user

What is the best method for interacting with multiple links in Puppeteer?

What is the best way to make IE 10 display a pointer instead of an I-bar for a select list?

Having difficulty transforming the JSON data into the necessary format for Google Charts using JavaScript

Obtaining the initial row information from jqGrid

What could be causing the SyntaxError with JavascriptExecutor: Unexpected identifier?

What is the best way to iterate through elements that come after a specific element?

What is the optimal method for verifying two distinct conditions simultaneously using Javascript?

Develop a PDF generator in ReactJS that allows users to specify the desired file name

Guide to displaying a canvas as an image in a new tab using Reactjs

The dynamic ui-sref attribute in HTML fails to execute, while the href tag functions properly

Having trouble accessing the data I'm setting in a separate component using the Context API

Utilize the NPM Python Shell Callback Feature within Electron

When I attempt to press the shift + tab keys together, Shiftkey is activated

A step-by-step guide to dynamically binding values to all browser tabs using localStorage and AngularJS

Is it necessary to always pause before I click?

Angular JS seems to be having some trouble with two-way binding

Discrepancy in div height between Chrome/Edge and Firefox browsers