setInterval 不适用于我的函数

Question

我正在尝试构建一个模拟时钟。

second_hand = document.getElementById('second_hand');

我有一个function，得到时间。

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

  return second;
}

然后我有一个function旋转手。

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

然后我使用 asetInterval来更新我的rotateHand()每一秒。

setInterval(rotateHand(second_hand), 1000); 

但是我的手不是每秒更新（移动）。怎么了？

这是一个版本：

second_hand = document.getElementById('second_hand');

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

  return second;
}

Answer 1

setInterval需要一个函数引用作为第一个参数。您不是在传递函数引用，而是在调用该rotateHand函数。

你可以：

• 传递对匿名函数的引用，该函数将rotateHand使用 secondHand 参数调用：setInterval(function () { rotateHand(second_hand)}, 1000);

• 使用Function.prototype.bind将函数引用传递rotateHand给以 secondHand 作为参数：

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>