如何让JQuery在循环动画中循环等待

Question

我有一个圆圈,其中有百分比的文字,以0%开头.一旦我盘旋它,它就会从0到100%(围绕圆圈的另一种效果).至于现在,百分比直接从0到100,我希望它显示进度(0,1,2 ...,99,100),但我不能设法让JQuery在每次for迭代之间等待.

这就是我尝试过的:JSFiddle演示.

注意:我的代码现在可以使用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()需要排队并且html()不排队所以我已经尝试了setTimeout,但它也没有用.我也试过了setInterval- 看下一个代码片段:

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

更清楚的是,我希望百分比符合效果进度 - 如果三角形绕过一半,百分比应该是50,所以,当我不再徘徊在圆圈时它应该逐渐回归到0.

Answer 1

首先,删除多余的transition: all 1scss规则!这在所有解决方案中都存在问题.

1.教育 - 使用setTimeout

for循环不会像你期望的那样工作,javascript 不是为这样的active-wait循环构建的:

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

您必须使用超时和回调.禁用.delay函数调用并将for循环重写为迭代的setTimeout回调,如下所示:

function loopit(dir, i){
    if (typeof i == "undefined") 
        i = -135;
    if (i >= 225)
        return;
    actions(i);
    setTimeout(function () {
        loopit(dir, i + 1);
    }, 1);
}

反向旋转将以类似方式编写 - 您可以将其自己编写为作业:-)

http://jsfiddle.net/NNq3z/10/

2.轻松 - 使用jQuery .animate()

最简单的方法是使用jQuery .animate()函数,它将为您定时动画"循环".要为百分比文本设置动画,请使用progress回调.动画旋转是棘手的,你需要使用特殊技巧:

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

http://jsfiddle.net/q9VXC/1/