setInterval is not working with my function [duplicate]

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-21 23:24:04Z

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, 2018 at 23:24

answered Jun 21, 2018 at 23:03

Guillaume Georges

4,0204 gold badges17 silver badges34 bronze badges

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

6 Comments

Sheshank S. Over a year ago

oh hey i guess we both follow the javascript tag

oehaut Over a year ago

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?

coagmano Over a year ago

Doesn't call run the function immediately, wouldn't it make more sense to use bind?

Guillaume Georges Over a year ago

@FredStark bind is what I meant. Thanks for pointing that out. I edited.

coagmano Over a year ago

I'm more surprised call worked for the OP! haha

|

Uzer · Accepted Answer · 2018-06-21 23:14:07Z

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, 2018 at 23:14

answered Jun 21, 2018 at 23:02

Uzer

3,2401 gold badge21 silver badges23 bronze badges

2 Comments

oehaut Over a year ago

That worked too. I'm not familiar with how the arrow expression works though. Thanks!

Uzer Over a year ago

I've added an example without them for you.

Sheshank S. · Accepted Answer · 2018-06-21 23:05:02Z

0

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>

answered Jun 21, 2018 at 23:05

Sheshank S.

3,3184 gold badges24 silver badges42 bronze badges

Collectives™ on Stack Overflow

setInterval is not working with my function [duplicate]

3 Answers 3

6 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Linked

Related