Question

不知道为什么在Javascript中很难做到这一点...有点令人沮丧的大声笑

这是我尝试过的方法之一：

function rotateDavid() {
  $("#david").css({
    'transform' : 'rotate(90deg)'
  });
  setTimeout(rotateDavid, 10000);
};
rotateDavid();

它只会执行一次，但不会重复...我不知道...

Answer 1

这里的问题不是您如何调用该函数。在某些情况下，这种方法实际上比setInterval更可取。

您遇到的问题是将Css设置为90度不会一遍又一遍地更改它。您每次都将其设置为相同的度值。

您需要在每次迭代中更新角度。因此，在这种情况下，您要添加90。

var rotation = 0;
function rotateDavid() {
  rotation += 1
  $("#david").css({
    'transform' : 'rotate(' + (90 * rotation) + 'deg)'
  });
  setTimeout(rotateDavid, 1000);
};
rotateDavid();

div{
  width:100px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="david">Hi</div>

您还可以使用mod运算符来防止数字变大。

'transform' : 'rotate(' + (90 * (rotation%4)) + 'deg)'

Answer 2

实际上，每个10s都会调用您的方法。如果将日志添加到方法内部的控制台中，则可以检查它。但是，您始终将css属性设置为相同的值，因此不会看到任何视觉效果。下一个示例显示了一个可能的修复程序：

function rotateDavid(rot)
{
  $("#david").css({
    'transform': `rotate(${rot}deg)`
  });

  rot = rot + 90 >= 360 ? 0 : rot + 90;
  setTimeout(() => rotateDavid(rot), 5000);
};

rotateDavid(0);

#david {
  background: skyblue;
  width: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="david">David</div>

甚至，您还可以使用setInterval()获得类似的功能：

function rotateDavid(rot)
{
  $("#david").css({
    'transform': `rotate(${rot}deg)`
  });
};

var rot = 90;
setInterval(
  () => {rotateDavid(rot); rot = rot + 90 >= 360 ? 0 : rot + 90;},
  5000
);

#david {
  background: skyblue;
  width: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="david">David</div>

如何在JavaScript中每隔几秒钟调用一次函数？

2 个答案: