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

Question

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

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

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>