在函数内传递参数的问题（setInterval）

Question

这是我的代码。https://www.jsfiddle.net/tpov743w/我正在尝试完成多个圆形进度条。这个想法是让它们动态工作，通过在需要时添加具有不同百分比值的额外 progressCircle_# 对象。如您所见，进度条加载数据并执行动画，但是当我检查浏览器中的元素时，我注意到无数“ReferenceError: start is not defined”。我需要帮助来克服这个问题。感谢您的任何建议。var progressCircle_1 = {  procent: 89,  startFrom: 0,  incrementBy: 1,  canvasId: 'canvas',  procentId: 'procent',  funct: function() {    var start = setInterval(function() {      draw.call(progressCircle_1)    }, 50);  }}var progressCircle_2 = {  procent: 59,  startFrom: 0,  incrementBy: 1,  canvasId: 'canvas1',  procentId: 'procent1',  funct: function() {    var start = setInterval(function() {      draw.call(progressCircle_2)    }, 50);  }}progressCircle_1.funct();progressCircle_2.funct();function draw() {  (this.startFrom < this.procent) ? this.startFrom++: clearInterval(start);  var getCanvas = document.getElementById(this.canvasId).getContext('2d');  var getNumber = document.getElementById(this.procentId).innerHTML = this.incrementBy++;  getCanvas.beginPath();  getCanvas.arc(250, 250, 100, 0, 0.06283185307179587 * this.startFrom);  getCanvas.lineWidth = '15';  getCanvas.strokeStyle = "white";  getCanvas.lineCap = "round";  getCanvas.stroke();};

Answer 1

只需添加var start在顶部而不是funct函数内部

完整的JS代码：

var start

var progressCircle_1 = {

  procent:89,

  startFrom:0,

  incrementBy:1,

  canvasId:'canvas',

  procentId:'procent',

  funct: function(){

    start = setInterval(function(){draw.call(progressCircle_1)},50);

  }

}

var progressCircle_2 = {

  procent:59,

  startFrom:0,

  incrementBy:1,

  canvasId:'canvas1',

  procentId:'procent1',

  funct: function(){

    start = setInterval(function(){draw.call(progressCircle_2)},50);

  }

}

progressCircle_1.funct();

progressCircle_2.funct();

function draw(){

  (this.startFrom<this.procent)?this.startFrom++:clearInterval(start);

  var getCanvas = document.getElementById(this.canvasId).getContext('2d');

  var getNumber = document.getElementById(this.procentId).innerHTML=this.incrementBy++;

  getCanvas.beginPath();

  getCanvas.arc(250,250,100,0,0.06283185307179587*this.startFrom);

  getCanvas.lineWidth='15';

  getCanvas.strokeStyle="white";

  getCanvas.lineCap="round";

  getCanvas.stroke();

};