SBe*_*non 3 html javascript css css3
我花了一些时间试图弄清楚Javascript的这一特定部分，以及为什么它如此令人讨厌。
就目前而言，我目前有两个功能。如下图所示。
function startUpProc(id)
{
var log = window.document.getElementById(id);
log.style.transform = "rotate(0deg)";
var i = 10;
while ( i <= 360)
{
setTimeout('changeRotate(' + id + ',' + i + ')', 100);
i = i + 10;
}
}
function changeRotate(item, val)
{
item.style.transform = "rotate(" + val + "deg)";
item.style.webkitTransform = "rotate(" + val + "deg)";
item.style.mozTransform = "rotate(" + val + "deg)";
//alert(item.style.transform);
}
旋转HTML元素的Javascript相对简单一点，在这种情况下，它是图像，该代码使用body onLoad处理程序调用，如下所示：
<body onLoad="startUpProc('logo');">
我目前的意图是使图像旋转360度一次，这可以通过使用while循环进行调节。
我感到困惑的事实是，尽管将超时设置为总共需要3.6秒才能完成，但它似乎甚至无法正常工作，并且没有抛出任何错误，因此我发出了警报该功能试图查看正在发生的事情。
警报被触发了36次，从视觉上我可以看到图像在页面上旋转。
我找到了以下SO Q＆A，但无济于事，答案仅适用于我尝试创建的特定事件，因为无论我尝试使用哪种代码浏览器，图像都在旋转，唯一的区别是，它仅在有警报或其中有东西停止代码流时才旋转... 旋转div元素
对于我来说不幸的是，我发现的所有其他答案似乎都引用了JQuery的用法，目前，我想远离JQuery并学会不使用第三方扩展和插件来熟练地使用JavaScript进行开发。
问题在于，该循环启动了36次旋转，并且在100ms之后，旋转发生了36次，i设置为“ 360”。
尝试这样的事情：
var STEP = 10;
function startUpProc(id)
{
var log = window.document.getElementById(id);
// initialized to 0 in changeRotate
makeCircle(log, 0);
}
function makeCircle(item, targetAngle) {
changeRotate(item, targetAngle);
if (targetAngle < 360) {
setTimeout(function (){
makeCircle(item, targetAngle + STEP);
}, 100);
}
}
这样可以确保每次旋转都在最后一个旋转完成之后开始。