CODEWITHSUNDEEP
javascriptcssangularjs
tjespe
tjespe

Reputation: 702

How to time a function in AngularJS

My code is as under:

HTML

<section ng-controller="randController as rand">
      Skriv inn minimumtall:<br>
      <input ng-model="rand.minimum" type="number" placeholder="Minste tall"><br>
      <div class="tiny"></div>
      Skriv inn makstall:<br>
      <input ng-model="rand.maksimum" type="number" placeholder="Største tall"><br><br>
      <ul class="nav nav-pills" ng-controller="clickController as click">
          <li ng-click="click.randClick()" ng-class="{'active' : click.randCheck(true)}" >
              <a ng-click="rand.tilfeldig()">Randomize!</a>
          </li>
      </ul>
      <div class="tiny"></div><br>
      <pre>Tilfeldig tall = {{rand.tilfeldig()}}</pre>
</section>

JS

.controller('clickController', function ($timeout) {
  this.randClicked = false;
  this.randClick = function () {
    this.randClicked = true;
    $timeout(function() {
        this.randClicked = false;
    }, 1000, true);
  };
  this.randCheck = function (x) {
      return this.randClicked === x;
  };
})

What I am trying to do is to reset the active class of the <li>-element after about 2 seconds (Unclick it after it has been clicked for 2 seconds). I have gotten tips from forum members but it still doesn't work. Currently, I get this error, which I don't understand.

Upvotes: 0

Views: 326

Answers (2)

gzc
gzc

Reputation: 8609

There is a problem about this pointer in your code. Try this:

.controller('clickController', function ($timeout) {
  var that = this;
  this.randClicked = false;
  this.randClick = function () {
    this.randClicked = true;
    $timeout(function() {
        that.randClicked = false;
    }, 1000, true);
  };
  this.randCheck = function (x) {
      return this.randClicked === x;
  };
})

Upvotes: 2

Andreas Poulsen
Andreas Poulsen

Reputation: 101

You can use angulars $timeout function for this.

First you have to inject it into your controller like so:

.controller('clickController', function ($timeout) {

Then you can use it like this

this.randClick = function () {
  this.randClicked = true;
  $timeout(function() {
    this.randClicked = false;
  }, 2000)
};

Where 2000 is the amount you want to wait before executing the code inside, in milliseconds

Upvotes: 1

Related Questions