为EasyPieChart插件添加setTimeout延迟执行的问题求助

问题回顾 #

我想让EasyPieChart插件在页面加载完成2秒后再运行，但添加setTimeout后整个JavaScript直接失效了。目前插件本身的调用和运行都正常，想问问setTimeout是不是实现这个延迟需求的最优方案？

问题根源：语法错误导致JS失效 #

先看你提供的代码，末尾的window.addEventListener('DOMContentLoaded', ...)部分有语法不完整的问题——回调函数最后少了一个闭合的})，这本身就会导致JS报错。当你再往里加setTimeout时，很可能进一步打乱了代码结构，让语法错误更严重，直接导致整个脚本失效。

正确添加延迟初始化的代码 #

下面是修正后的代码，把图表初始化逻辑放到setTimeout里，同时修复原有的语法问题：

! function () { 
    var a = function(a, b) { 
        var c = document.createElement("canvas"); 
        "undefined" != typeof G_vmlCanvasManager && G_vmlCanvasManager.initElement(c); 
        var d = c.getContext("2d"); 
        if (c.width = c.height = b.size, a.appendChild(c), window.devicePixelRatio > 1) { 
            var e = window.devicePixelRatio; 
            c.style.width = c.style.height = [b.size, "px"].join(""), c.width = c.height = b.size * e, d.scale(e, e) 
        } 
        d.translate(b.size / 2, b.size / 2), d.rotate((-0.5 + b.rotate / 180) * Math.PI); 
        var f = (b.size - b.lineWidth) / 2; 
        b.scaleColor && b.scaleLength && (f -= b.scaleLength + 2); 
        var g = function(a, b, c) { 
            c = Math.min(Math.max(0, c || 1), 1), d.beginPath(), d.arc(0, 0, f, 0, 2 * Math.PI * c, !1), d.strokeStyle = a, d.lineWidth = b, d.stroke() 
        }, h = function() { 
            var a, c, e = 24; 
            d.lineWidth = 1, d.fillStyle = b.scaleColor, d.save(); 
            for (var e = 24; e >= 0; --e) 0 === e % 6 ? (c = b.scaleLength, a = 0) : (c = .6 * b.scaleLength, a = b.scaleLength - c), d.fillRect(-b.size / 2 + a, 0, c, 1), d.rotate(Math.PI / 12); 
            d.restore() 
        }; 
        Date.now = Date.now || function() { return +new Date }; 
        var i = function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(a) { window.setTimeout(a, 1e3 / 60) } }(); 
        this.clear = function() { d.clearRect(b.size / -2, b.size / -2, b.size, b.size) }, 
        this.draw = function(a) { 
            this.clear(), b.scaleColor && h(), b.trackColor && g(b.trackColor, b.lineWidth), d.lineCap = b.lineCap; 
            var c; c = "function" == typeof b.barColor ? b.barColor(a) : b.barColor, a > 0 && g(c, b.lineWidth, a / 100) 
        }.bind(this), 
        this.animate = function(a, c) { 
            var d = Date.now(); 
            b.onStart(a, c); 
            var e = function() { 
                var f = Math.min(Date.now() - d, b.animate), g = b.easing(this, f, a, c - a, b.animate); 
                this.draw(g), b.onStep(a, c, g), f >= b.animate ? b.onStop(a, c) : i(e) 
            }.bind(this); 
            i(e) 
        }.bind(this) 
    }; 
    window.EasyPieChart = a; 
}();

var options = { 
    scaleColor: false, 
    trackColor: 'rgba(255,255,255,0.3)', 
    barColor: '#fff', 
    lineWidth: 12, 
    lineCap: 'butt', 
    size: 230 
};

window.addEventListener('DOMContentLoaded', function() {
    // 延迟2秒初始化图表
    setTimeout(function() {
        var charts = [];
        [].forEach.call(document.querySelectorAll('.chart'), function(el) {
            charts.push(new EasyPieChart(el, options));
        });
    }, 2000); // 2000毫秒=2秒
});

关于setTimeout是否为最优方案 #

如果你的需求就是单纯延迟2秒执行初始化，那setTimeout完全是最优方案之一：

• 它语法简单，逻辑直观，容易维护；
• 针对这种固定时长的延迟场景，没有多余的性能开销。

但如果你的延迟需求是依赖某些资源（比如图片、其他脚本）加载完成，那可能需要用window.onload或者监听特定资源的load事件，但如果只是固定延迟2秒，setTimeout就是最适合的选择。

内容的提问来源于stack exchange，提问作者scot