setInterval is not working with my function

Question

I'm trying to build an analog clock.

second_hand = document.getElementById('second_hand');

I have a function that get the time.

function getTime() {
  var date = new Date(),
  second = date.getSeconds();

  return second;
}

Then I have a function that rotate the hand.

function rotateHand(hand) {
  var second = getTime();
  hand.style.transformOrigin = "0 100%";
  hand.style.transform = 'rotate(' + second * 6 + 'deg)';
}

Then I am using a setInterval to update my rotateHand() every second.

setInterval(rotateHand(second_hand), 1000);

But my hand is not updating(moving) every second. What is wrong?

Here is a version of this:

second_hand = document.getElementById('second_hand');
function getTime() {
  var date = new Date(),
  second = date.getSeconds();

  return second;
}
function rotateHand(hand) {
  var second = getTime();
  hand.style.transformOrigin = "0 100%";
  hand.style.transform = 'rotate(' + second * 6 + 'deg)';
}

setInterval(rotateHand(second_hand), 1000);

<div id="second_hand">hiiiiiiiiii</div>

Guillaume Georges · Accepted Answer · 2018-06-21T23:24:04.380

7

setInterval needs a function reference as the first parameter. You're not passing a function reference, you're invoking the rotateHand function.

You can either :

pass a reference to an anonymous function that will call rotateHand with the secondHand parameter : setInterval(function () { rotateHand(second_hand)}, 1000);
use Function.prototype.bind to pass a function reference to rotateHand with secondHand as a parameter :

var second_hand = document.getElementById('second_hand');

function getTime() {
  var date = new Date(),
  second = date.getSeconds();

  return second;
}

function rotateHand(hand) {
  var second = getTime();
  hand.style.transformOrigin = "0 100%";
  hand.style.transform = 'rotate(' + second * 6 + 'deg)';
}

setInterval(rotateHand.bind(null, second_hand), 1000);

<div id="second_hand">2nd hand</div>

edited Jun 21 '18 at 23:24

answered Jun 21 '18 at 23:03

Guillaume Georges

3,878
3
14
32

oh hey i guess we both follow the javascript tag – Sheshank S. Jun 21 '18 at 23:06
Thanks, that did the trick! Strangely, I was testing my setInterval with another function and it was working while I was passing only the function, not a reference! Any idea why? – oehaut Jun 21 '18 at 23:07
2

Doesn't `call` run the function immediately, wouldn't it make more sense to use `bind`? – coagmano Jun 21 '18 at 23:16
2

@FredStark `bind` is what I meant. Thanks for pointing that out. I edited. – Guillaume Georges Jun 21 '18 at 23:18
I'm more surprised `call` worked for the OP! haha – coagmano Jun 21 '18 at 23:19
First version of the answer was with the anonymous function. I added the example with call/bind later. – Guillaume Georges Jun 21 '18 at 23:19

Uzer · Answer 2 · 2018-06-21T23:14:07.067

2

The issue probably has to do with this line:

setInterval(rotateHand(second_hand), 1000);

rotateHand(second_hand) evaluates to undefined. So you're setInterval isn't doing anything.

Instead try this:

setInterval(()=>rotateHand(second_hand), 1000);

Or the equivalent without arrow sugar:

setInterval(function(){rotatehand(second_hand)},1000);

edited Jun 21 '18 at 23:14

answered Jun 21 '18 at 23:02

Uzer

3,054
1
17
23

That worked too. I'm not familiar with how the arrow expression works though. Thanks! – oehaut Jun 21 '18 at 23:09
I've added an example without them for you. – Uzer Jun 21 '18 at 23:15

score 0 · Answer 3 · answered Jun 21 '18 at 23:05

Use this, it should work:

function(){rotateHand(second_hand);}

rotateHand(second_hand); isn't a function reference so it won't work.

second_hand = document.getElementById('second_hand');
function getTime() {
  var date = new Date(),
  second = date.getSeconds();

  return second;
}
function rotateHand(hand) {
  var second = getTime();
  hand.style.transformOrigin = "0 100%";
  hand.style.transform = 'rotate(' + second * 6 + 'deg)';
}

setInterval(function(){rotateHand(second_hand);}, 1000);

<div id="second_hand">------------</div>

setInterval is not working with my function

3 Answers3