在函数内传递参数时遇到问题(SetInterval)
在函数内传递参数时遇到问题(SetInterval)
提问于 2019-09-12 15:26:49
这是我的代码。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();
};#canvas {
border: 1px solid red;
transform: rotate(0deg);
}
#procent {
font-size: 65px;
color: white;
position: absolute;
top: 160px;
left: 200px;
}
#procent::after {
content: '%';
}
.container {
background-color: lightblue;
height: 500px;
width: 500px;
}
#canvas1 {
border: 1px solid red;
transform: rotate(0deg);
}
#procent1 {
font-size: 65px;
color: black;
position: absolute;
top: 660px;
left: 200px;
}
#procent1::after {
content: '%';
}
.container1 {
background-color: lightgrey;
height: 500px;
width: 500px;
}
#canvasProgressBar {
position: relative;
top: 100px;
left: 10px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<canvas id="canvas" width="500" height="500">
</div>
<p id="procent"></p>
<div class="container1">
<canvas id="canvas1" width="500" height="500">
</div>
<p id="procent1"></p>
<script src="main.js"></script>
</body>
</html>
Stack Overflow用户
发布于 2019-09-12 16:11:28
将start传递给调用函数，您指定函数的this is progressCircle_1，但它没有start属性，因此需要将timeoutId(start)传递给调用函数。
var progressCircle_1 = {
procent:89,
startFrom:0,
incrementBy:1,
canvasId:'canvas',
procentId:'procent',
funct: function(){
var start = setInterval(function(){draw.call(progressCircle_1,start)},50);
}
}
var progressCircle_2 = {
procent:59,
startFrom:0,
incrementBy:1,
canvasId:'canvas1',
procentId:'procent1',
funct: function(){
var start = setInterval(function(){draw.call(progressCircle_2,start)},50);
}
}
progressCircle_1.funct();
progressCircle_2.funct();
function draw(start){
(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();
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57901714
复制相关文章
相似问题
腾讯云开发者
