How to time a function in AngularJS

Question

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.

Have you looked at setTimeout and setInterval? http://stackoverflow.com/questions/729921/settimeout-or-setinterval — j-u-s-t-i-n, Nov 09 '15 at 18:19

score 2 · Answer 1 · answered Nov 10 '15 at 17:23

2

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

answered Nov 10 '15 at 17:23

gzc

8,180
8
42
62

This soulotion workes, although it doesn't always work. However it seems very odd to me. If `that` equals `this`, why is it a problem to use `this`? – tjespe Nov 10 '15 at 22:19
Update: this soulotion only works when the input boxes are empty. (Couldn't edit last comment because I'm on mobile) – tjespe Nov 10 '15 at 22:32
@tjespe `this` pointer is one of most tricky parts of javascript. It's not quite simple as it looks like. Search some relevant articles and read carefully. It deserve spending 10 mins, I promise. – gzc Nov 11 '15 at 05:18
The button works quite well now, but I wouldn't like the random number to be recalculated 0.2 seconds after the button is clicked. Do you have any idea why that is? – tjespe Nov 18 '15 at 14:50
No. It's out of topic of this question. Please post another question. – gzc Nov 18 '15 at 15:18

score 1 · Answer 2 · answered Nov 09 '15 at 18:21

1

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

answered Nov 09 '15 at 18:21

Andreas Poulsen

101
3

Thanks! I'll try this. But I wonder: why is there a $-sign in front of timeout? Or more generally: what purpose does the $-sign serve in angular? – tjespe Nov 09 '15 at 18:23
1

Generally the $-sign signifies it's an angular function and not native Javascript. $timeout is basically like setTimeout but it will $digest afterwards I believe, so it will update all bindings and such. – Andreas Poulsen Nov 09 '15 at 18:25
1

@tjespe As per the angular documentation: `The $ prefix is there to namespace Angular-provided services. To prevent collisions it's best to avoid naming your services and models anything that begins with a $.` – Daniel Moses Nov 09 '15 at 18:27
The suggested answer has not solved my problem. The class of the `
`-element stays active. However, the random number output changes after a second (this is not wanted though)

tjespe

Nov 09 '15 at 19:45

Can you try to add `, true` after 2000, it shouldn't matter but sometimes its necessary – Andreas Poulsen Nov 09 '15 at 19:49

I tried adding `, true` after 1000. It still doesn't work. [This](https://goo.gl/ktVqcq) is the error I get, but I can't make any sense out of it. – tjespe Nov 10 '15 at 17:15

How to time a function in AngularJS

2 Answers2