Javascript 如何在旋转动画中使JQuery在循环内等待

我有一个圆圈，里面有一个百分比文本，以0%开始。一旦我将圆圈悬停，它将从0变为100%（圆圈周围还有另一个效果）。现在，百分比直接从0变为100，我希望它显示进度（0,1,2…，99100），但我无法让JQuery在每次

迭代之间等待

这就是我所尝试的：

注意：我的代码目前可以与chrome一起使用

这是一次迭代：

function actions(i){
    var box = $('#box');
    box.css('transform','rotate(' + i + ' deg)');
    box.css('-ms-transform','rotate(' + i + 'deg)');
    box.css('-webkit-transform','rotate(' + i + 'deg)');
    prec = (100*(i + 135))/360;
    $("div.prec").delay(100).html(Math.round(prec)+"%");
}

我知道
delay（）。我还尝试了
setInterval
-请参阅下一个代码段：

setInterval(function () {
    $("div.prec").html(Math.round(prec)+"%");
},100);

更清楚地说，我希望百分比与效果进度相匹配-如果三角形绕了一半，百分比应该是50，因此，当我不再在圆圈上悬停时，它应该逐渐返回到0。
您应该使用
设置间隔
，每次都必须增加
百分比
：

var percentage = 0;
var timer = setInterval(function() {
    percentage++;
    if (percentage > 100) {
        clearInterval(timer);
    } else {
        $("div.prec").html(percentage + "%");
    }
}

您还可以在其中调用
actions（）
。
首先，删除多余的
转换：所有1
css规则！这在所有的解决方案中都制造了麻烦

1.教育-使用setTimeout
for循环不会像您预期的那样工作，javascript不是为活动等待循环生成的，如下所示：

for (var i = -135; i < 225; i++){
    actions(i);
    sleep(some time);      
}

后面的旋转可以用类似的方式写——你可以自己写，作为家庭作业：——）

2.简单-使用jQuery.animate（）
最简单的方法是使用函数，它将为您进行动画“循环”计时。要设置百分比文本的动画，请使用
progress
callback。不过，设置旋转动画很棘手，您需要使用：


var i=-135，box=$（“#box”），prec；
setTimeout（函数（）{
如果（$（“#圆圈”）是（“：悬停”））
loopit（“c”）；
其他的
loopit（“nc”）；
},1);
函数loopit（dir）{
如果（dir==“c”）
i++；
其他的
我--；
如果（i225）
i=225；
prec=（100*（i+135））/360；
$（“.prec”）.html（Math.round（prec）+“%”；
css（“变换”、“旋转”（+i+“度）”）
.css（“-ms变换”、“旋转（“+i+”度）”）
.css（“-moz变换”、“旋转（“+i+”度）”）
.css（“-webkit transform”，“rotate”（+i+“deg）”）；
setTimeout（函数（）{
如果（$（“#圆圈”）是（“：悬停”））
loopit（“c”）；
其他的
loopit（“nc”）；
},1);
}

已删除
转换：所有1
。
在代码中，由于使用for循环，框的百分比立即更改为100%。For循环的执行速度非常快，就像它立即变为100%一样，因此不建议这样做。
没错，javascript不会逐行执行。你的代码还是有问题谢谢，但对我来说没用。我更新了问题，以便更清楚地了解我想要实现的目标。@ItayGal该问题是由
转换：all 1s
css规则引起的。我把它拆了，现在效果很好。我更新了我的解决方案，并使用jquery
.animate（）
添加了更简单的解决方案。是的，在上一种情况下，当我悬停时，它开始将数字增加到100，然后只有箭头移动。现在你绝对是Prefect@Kirk是-通过删除被诅咒的
transition:all 1s
css规则修复了这个问题。我根本没想到它会被css打破：）按方向引用其他答案通常不是一个好主意。根据投票和被接受的答案，顺序可能会改变。如果你需要引用一个特定的答案，你最好把链接放到答案上。而且，“上面的代码仍然有一些bug”并不能解释太多。如果您提供一些解释，特别是您修复了哪些bug以及原因，这将是一个更好的答案。您可以添加一个解释吗。目前，您的解决方案更好，但缺乏适当的解释。虽然我理解，但这不是一个“好”的答案。这是一个抄袭-你从我的答案中拿走了我的小提琴，只做了一些细微的修改@ItayGal，你为什么接受这个？事实上它并不相似，而且它可以工作，而你建议的解决方案却不能。您的答案包含更好的解释（投票支持您），但您提供的示例存在错误-例如，如果我将圆圈悬停，然后在它达到100%之前不悬停，动画将从100%开始倒计时，而不是从目前为止的百分比开始倒计时。另见：
function loopit(dir, i){
    if (typeof i == "undefined") 
        i = -135;
    if (i >= 225)
        return;
    actions(i);
    setTimeout(function () {
        loopit(dir, i + 1);
    }, 1);
}

$({ deg: deg_from } ).animate({
    deg: deg_to
}, {
    duration: 1000,
    progress: function (animation, progress) {
        $("div.prec").html(Math.round(progress*100)+"%");
    },
    step: function(now) {
        $('#box').css({
            transform: 'rotate(' + now + 'deg)'
        });
    }
});

var i = -135,box = $("#box"),prec;
setTimeout(function(){
if($("#circle").is(":hover"))
   loopit("c");
else
    loopit("nc");
},1);
function loopit(dir){
if (dir=="c")
    i++;        
else
    i--;
if(i<-135)
    i=-135;
if(i>225)
    i=225;
prec = (100*(i + 135))/360;   
$(".prec").html(Math.round(prec)+"%");
box.css("transform","rotate("+i+"deg)")
.css("-ms-transform","rotate("+i+"deg)")
.css("-moz-transform","rotate("+i+"deg)")
.css("-webkit-transform","rotate("+i+"deg)");
setTimeout(function(){
if($("#circle").is(":hover"))
   loopit("c");
else
    loopit("nc");
},1);
}