setInterval 不适用于我的功能[重复]答案

【问题标题】：setInterval is not working with my function [duplicate]setInterval 不适用于我的功能[重复]
【发布时间】：2018-06-21 22:57:12
【问题描述】：

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

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

然后我使用setInterval 每秒更新我的rotateHand()。

setInterval(rotateHand(second_hand), 1000);

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

这是一个版本：

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

&lt;div id="second_hand"&gt;hiiiiiiiiii&lt;/div&gt;

【问题讨论】：

标签： javascript setinterval

【解决方案1】：

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

你可以：

传递对匿名函数的引用，该函数将使用 secondHand 参数调用 rotateHand：setInterval(function () { rotateHand(second_hand)}, 1000);
使用Function.prototype.bind 将函数引用传递给rotateHand，并将秒手作为参数：

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

&lt;div id="second_hand"&gt;2nd hand&lt;/div&gt;

【讨论】：

哦，我想我们都遵循 javascript 标签
谢谢，成功了！奇怪的是，我正在用另一个函数测试我的 setInterval 并且它在我只传递函数而不是引用时工作！知道为什么吗？
call不立即运行函数，使用bind不是更有意义吗？
@FredStark bind 是我的意思。感谢您指出了这一点。我编辑了。
我更惊讶call 为 OP 工作！哈哈

【解决方案2】：

问题可能与这一行有关：

setInterval(rotateHand(second_hand), 1000);

rotateHand(second_hand) 计算结果为未定义。所以你 setInterval 什么也没做。

试试这个：

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

或者没有箭头糖的等价物：

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

【讨论】：

这也有效。我不熟悉箭头表达式的工作原理。谢谢！
我已经为你添加了一个没有它们的示例。

【解决方案3】：

使用这个，它应该可以工作：

function(){rotateHand(second_hand);}

rotateHand(second_hand); 不是函数引用，所以它不起作用。

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

&lt;div id="second_hand"&gt;------------&lt;/div&gt;

【讨论】：