Question

我想设置一个超时时间，以便该插件在2秒后运行。

但是我正在努力创建它。创建setTimout似乎完全破坏了JS。

一切都正常运行，setTimeout是否是最佳选择？

以下插件列在此处https://codepen.io/anon/pen/aPjqBy

JS

        ! 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 = b;

        }();


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


        window.addEventListener('DOMContentLoaded', function() {
            var charts = [];
            [].forEach.call(document.querySelectorAll('.chart'), function(el) {
                charts.push(new EasyPieChart(el, options));
            });
        });

Answer 1

添加setTimeout似乎可以解决问题

window.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    var charts = [];
    [].forEach.call(document.querySelectorAll('.chart'), function(el) {
      charts.push(new EasyPieChart(el, options));
    });
  }, 2000);
});

在这里测试：

/**!
 * easyPieChart
 * Lightweight plugin to render simple, animated and retina optimized pie charts
 *
 * @license Dual licensed under the MIT (https://www.opensource.org/licenses/mit-license.php) and GPL (https://www.opensource.org/licenses/gpl-license.php) licenses.
 * @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
 * @version 2.0.1
 **/
! 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)
    },
    b = function(b, c) {
      var d, e = {
          barColor: "#ef1e25",
          trackColor: "#f9f9f9",
          scaleColor: "#dfe0e0",
          scaleLength: 5,
          lineCap: "round",
          lineWidth: 3,
          size: 110,
          rotate: 0,
          animate: 1e3,
          renderer: a,
          easing: function(a, b, c, d, e) {
            return (b /= e / 2) < 1 ? d / 2 * b * b + c : -d / 2 * (--b * (b - 2) - 1) + c
          },
          onStart: function() {},
          onStep: function() {},
          onStop: function() {}
        },
        f = {},
        g = 0,
        h = function() {
          this.el = b, this.options = f;
          for (var a in e) e.hasOwnProperty(a) && (f[a] = c && "undefined" != typeof c[a] ? c[a] : e[a], "function" == typeof f[a] && (f[a] = f[a].bind(this)));
          f.easing = "string" == typeof f.easing && "undefined" != typeof jQuery && jQuery.isFunction(jQuery.easing[f.easing]) ? jQuery.easing[f.easing] : e.easing, d = new f.renderer(b, f), d.draw(g), b.dataset && b.dataset.percent && this.update(parseInt(b.dataset.percent, 10))
        }.bind(this);
      this.update = function(a) {
        return a = parseInt(a, 10), f.animate ? d.animate(g, a) : d.draw(a), g = a, this
      }.bind(this), h()
    };
  window.EasyPieChart = b
}();


var options = {
  scaleColor: false,
  trackColor: 'rgba(255,255,255,0.3)',
  barColor: '#E7F7F5',
  lineWidth: 6,
  lineCap: 'butt',
  size: 95
};

window.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    var charts = [];
    [].forEach.call(document.querySelectorAll('.chart'), function(el) {
      charts.push(new EasyPieChart(el, options));
    });
  }, 2000);
});

html,
ul {
  background: green;
}

.chart {
  display: inline-block;
  width: 95px;
  height: 95px;
  margin: 0 10px;
  vertical-align: top;
  position: relative;
  padding-top: 22px;
}

.chart span {
  display: block;
  font-size: 2em;
  color: white;
  font-weight: normal;
}

.chart canvas {
  position: absolute;
  left: -20px;
  top: -5px;
}

<ul>
  <li class="chart" data-percent="98"><span>98%</span></li>
  <li class="chart" data-percent="40"><span>40%</span></li>
</ul>

提琴：https://jsfiddle.net/qkyj9wbv/1/

在插件函数上创建setTimeout

1 个答案: