javascript - 究竟如何进行这个循环的进步呢？ (兼容Internet Explorer 9，时间准确)

Question

我想制作一个像这样的进度 slider :http://www.elotrolado.net/

我一直在努力取得进步。但即使它在 Chrome 中工作，Internet Explorer 10 不是在 4 秒内完成，而是在 7 秒内结束。并且 IE9 不可见。

我的代码: http://jsfiddle.net/r6N2X/1/

在之前的网站中，两者都有效。

CSS:

    body {
    margin: 10px;
    padding: 10px;
}
#sl-progress {
    position: absolute;
    z-index: 1;
}

HTML:

<canvas id="sl-progress" width="35" height="35"></canvas>

JavaScript:

window.requestAnimSpinner = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;
})
();

var paused = false;
var finished = false;
var endPercent = 100;
var radius = 11;
var curPerc = 0;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
var timeMilli = 4000; // tiempo total
var time = timeMilli / 100;

function animate() {
    var canvas = document.getElementById('sl-progress');
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var context = canvas.getContext('2d');
    context.lineWidth = 7;
    context.strokeStyle = "#000";

    function render(current) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
        context.stroke();
        curPerc++;
        if (curPerc <= endPercent && !paused) {
            setTimeout(function () {
                requestAnimSpinner(function () {
                    render(curPerc / 100);
                });
            }, time);
        } else if (paused) {

        } else {
            //curPerc = 0;
            //context.clearRect(0, 0, canvas.width, canvas.height);
        }
    }
    render();
}

/* START ANIMATION */
 animate();

Answer 1

IE9不支持requestAnimationFrame。

但是，您可以使用 Paul Irish 的 polyfill 在 IE9 中进行定时绘制:

https://gist.github.com/paulirish/1579671