在函数内传递参数的问题（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 startvar progressCircle_1 = {&nbsp; procent:89,&nbsp; startFrom:0,&nbsp; incrementBy:1,&nbsp; canvasId:'canvas',&nbsp; procentId:'procent',&nbsp; funct: function(){&nbsp; &nbsp; start = setInterval(function(){draw.call(progressCircle_1)},50);&nbsp; }}var progressCircle_2 = {&nbsp; procent:59,&nbsp; startFrom:0,&nbsp; incrementBy:1,&nbsp; canvasId:'canvas1',&nbsp; procentId:'procent1',&nbsp; funct: function(){&nbsp; &nbsp; start = setInterval(function(){draw.call(progressCircle_2)},50);&nbsp; }}progressCircle_1.funct();progressCircle_2.funct();function draw(){&nbsp; (this.startFrom<this.procent)?this.startFrom++:clearInterval(start);&nbsp; var getCanvas = document.getElementById(this.canvasId).getContext('2d');&nbsp; var getNumber = document.getElementById(this.procentId).innerHTML=this.incrementBy++;&nbsp; getCanvas.beginPath();&nbsp; getCanvas.arc(250,250,100,0,0.06283185307179587*this.startFrom);&nbsp; getCanvas.lineWidth='15';&nbsp; getCanvas.strokeStyle="white";&nbsp; getCanvas.lineCap="round";&nbsp; getCanvas.stroke();};