Ways to retrieve a service variable within a delegated function (callback)

Question

Ways to retrieve a service variable within a delegated function (callback)

I am currently using a service that has a variable which needs to be updated by the service itself. However, I am facing an issue where I cannot access the variable in anonymous or delegated functions.

(function() {
  'use strict';

  angular
      .module('yoTest')
      .service('mainService', mainService);

  /** @ngInject */
  function mainService($timeout) {
    this.counter = 1;
    this.updateCounter = function updateCounter() {
      this.counter++;
      $timeout(updateCounter, 500);
    }
    this.updateCounter();
  }
})();

Whenever I try to reload the "updateCounter" using $timeout, I encounter an error. Why is this happening?

Is there a way to access it using timeout and delegate/callback methods?

javascript angularjs callback angularjs-service

Answer 1

Answer №1

When calling a function, the issue arises when you pass the updateCounter function reference inside the $timeout callback. This causes a problem because when the $timeout tries to evaluate that function, the this within updateCounter will refer to its own context rather than the context of mainService. In such scenarios, it is necessary to explicitly pass the current context using .bind(this).

this.updateCounter = function updateCounter() {
  this.counter++;
  console.log(this.counter)
  $timeout(updateCounter.bind(this), 500);
}

PLuker

The same result can be achieved in ES6 by utilizing a Fat Arrow function.

$timeout(() => { updateCounter () }, 500);

Answer 2

When calling a function, the issue arises when you pass the updateCounter function reference inside the $timeout callback. This causes a problem because when the $timeout tries to evaluate that function, the this within updateCounter will refer to its own context rather than the context of mainService. In such scenarios, it is necessary to explicitly pass the current context using .bind(this).

this.updateCounter = function updateCounter() {
  this.counter++;
  console.log(this.counter)
  $timeout(updateCounter.bind(this), 500);
}

PLuker

The same result can be achieved in ES6 by utilizing a Fat Arrow function.

$timeout(() => { updateCounter () }, 500);

Answer 3

Answer №2

In addition to Pankaj's response, an alternative approach is to store the current context in a variable and access properties and functions through this variable.

function mainService($timeout) {
  var serviceContext = this;

  serviceContext.counter = 1;

  serviceContext.updateCounter = function updateCounter() {
    serviceContext.counter++;
    console.log(serviceContext.counter)
    $timeout(serviceContext.updateCounter, 500);
  }

  serviceContext.updateCounter();

}

http://plnkr.co/edit/EuTiiP8HZUPulmJIX3IP

Answer 4

In addition to Pankaj's response, an alternative approach is to store the current context in a variable and access properties and functions through this variable.

function mainService($timeout) {
  var serviceContext = this;

  serviceContext.counter = 1;

  serviceContext.updateCounter = function updateCounter() {
    serviceContext.counter++;
    console.log(serviceContext.counter)
    $timeout(serviceContext.updateCounter, 500);
  }

  serviceContext.updateCounter();

}

http://plnkr.co/edit/EuTiiP8HZUPulmJIX3IP

Ways to retrieve a service variable within a delegated function (callback)

Answer №1

Answer №2

Similar questions

Troubleshooting Multer to fix image payload issues in a Node.js and React.js application

Modify the css based on the user's input

Stop the link action following a delay after the mouse is clicked

"Looking to spice up your website with a dynamic background-image

Interactive search tool for toggling visibility of elements

Creating a dynamic HIIT program with an autoplay feature for videos and images, using a jQuery/JavaScript slider "playlist" with the backend support of

Choosing Issues

Detecting collisions using CSS animation

Retrieve the array element that is larger than the specified number, along with its adjacent index

Begin Leaflet with JQuery UI Slider set to a predefined value

Error with font import causing hydration issue in NextJS

Exploring AngularJS with Jasmine and the Power of $httpBackend

dynamically import a variety of components in vue.js and nuxt depending on certain conditions

Adding a version number to the splash screen in Cordova: A step-by-step guide

JWPlayer encounters an issue: "undefined" function is not defined

The code threw an error stating: "Error: Unable to set a new value to the unalterable property 'children' of the object '#<Object>'"

Node.js: Attempting to arrange ISO dates based on their time span

Unexpected package version changes occurring due to bower install

Reactstrap and React-router v4 are failing to redirect when there is a partial change in the address link

The browser is unable to load the local JSON file due to an XMLHttpRequest error