为什么每次按下按钮时我的动画速度都会增加？

Question

这是一个链接： https : //jsfiddle.net/danbogdan/Ltsxnude/6/我正在尝试制作一些带有“刀片”的动画，但是每次我按下按钮时，该特定动画或下一个的速度都会增加一！ 我想根据选项值提高或降低速度！ 所以用户输入螺旋桨的数量后，他可以选择一个螺旋桨可以有多少桨叶2-8，以及速度。 现在，每次单击按钮都会增加当前动画的速度，如果我选择 3 叶螺旋桨，则会增加下一个动画的速度。

 function propellersNumber() { var number = document.getElementById('noOfPropellers').value; var container = document.getElementById('container'); while (container.hasChildNodes()) { container.removeChild(container.lastChild); } for (let i = 0; i < number; i++) { container.appendChild(document.createTextNode("Propeller " + (i + 1) + " number of blades: ")); var input = document.createElement("input"); input.id = "propeller" + i; input.type = "number"; input.defaultValue = 2; input.min = 2; input.name = "propeller" + i; container.appendChild(input); container.appendChild(document.createElement('br')); container.appendChild(document.createTextNode("Propeller " + (i + 1) + " speed: ")); var select = document.createElement('select'); select.id = "innerSelect" + i; var option; var inputdata = "slow||medium||fast"; inputdata.split('||').forEach(function(item) { option = document.createElement('option'); option.value = option.textContent = item; select.appendChild(option); }) container.appendChild(select); container.appendChild(document.createElement('br')); } } function switchBetween() { var numberPropellers = document.getElementById('noOfPropellers').value; var el = document.getElementById('propeller0'); var result = el.value; var speed = document.getElementById('innerSelect0'); var speedResult = speed.options[speed.selectedIndex].value; if (result == 2) { var canvas = document.getElementById("propellerOne"); var ctx = canvas.getContext("2d"); var angle = 0; if (speedResult == "slow") { angle = 2; } else if (speedResult == "medium") { angle = 6; } else if (speedResult == 'fast') { angle = 10; } requestAnimationFrame(animate); function animate() { requestAnimationFrame(animate); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(canvas.width / 2, canvas.height / 2); ctx.stroke(); ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(canvas.width, 0); ctx.lineTo(canvas.width / 2, canvas.height / 2); ctx.stroke(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(Math.PI / 180 * angle); ctx.translate(-canvas.width / 2, -canvas.height / 2) } } else if (result == 3) { // 3 blades }

 <pre> <h2>Input number of propellers</h2> <input type="number" id="noOfPropellers" name="propeller" min="0" value="0" id="propeller"> <button onclick="propellersNumber()">Add</button> <div id="container"></div> <button onclick="switchBetween()">Switch</button> <div class="container"> <canvas class="propeller" id="propellerOne" height="120px"></canvas> </div> </pre>