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? stackoverflow.com/questions/729921/settimeout-or-setinterval — j-u-s-t-i-n
– j-u-s-t-i-n, Commented Nov 9, 2015 at 18:19

gzc · Accepted Answer · 2015-11-10 17:23:27Z

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, 2015 at 17:23

gzc

8,6998 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

tjespe Over a year ago

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 Over a year ago

Update: this soulotion only works when the input boxes are empty. (Couldn't edit last comment because I'm on mobile)

gzc Over a year ago

@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.

tjespe Over a year ago

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?

gzc Over a year ago

No. It's out of topic of this question. Please post another question.

Andreas Poulsen · Accepted Answer · 2015-11-09 18:21:18Z

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 9, 2015 at 18:21

Andreas Poulsen

1013 bronze badges

6 Comments

tjespe Over a year ago

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?

Andreas Poulsen Over a year ago

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.

Daniel Moses Over a year ago

@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 $.

tjespe Over a year ago

The suggested answer has not solved my problem. The class of the <li>-element stays active. However, the random number output changes after a second (this is not wanted though)

Andreas Poulsen Over a year ago

Can you try to add , true after 2000, it shouldn't matter but sometimes its necessary

|

Collectives™ on Stack Overflow

How to time a function in AngularJS

2 Answers 2

5 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related