Question

我正在处理这部分代码，可以呈现简单的加载栏

const smallSpinner = document.getElementById('spinner-small').getContext('2d');
let pointToFill = 4.72;
let cw = smallSpinner.canvas.width; //Return canvas width
let ch = smallSpinner.canvas.height; //Return canvas height
let diff;

let = fillSmallSpinner = (startingPointSmall = 0) => {
    diff = ((startingPointSmall / 100) * Math.PI * 2 * 10);

    smallSpinner.clearRect(0, 0, cw, ch);

    smallSpinner.lineWidth = 5;

    smallSpinner.strokeStyle = '#d40511';

    /* smallSpinner.textAlign = 'center';

     smallSpinner.font = "25px monospace"; 

     smallSpinner.fillText(no + '%', 50, 55); */ //uncomment this if you need percent progress inside spinner

    smallSpinner.beginPath();

    smallSpinner.arc(50, 50, 40, pointToFill, diff / 10 + pointToFill);

    smallSpinner.stroke();


    if (startingPointSmall >= 100) {
        clearTimeout(fill);
    }
    startingPointSmall++;
}

let small = setInterval(fillSmallSpinner, 50);

关键是当“ startingPointSmall”定义为普通变量时

let startingPointSmall = 0;

它完全可以正常工作，但是我想让它更有用，并将起点作为函数参数传递。当我像这样在0％的预定义起点上执行此操作时，它将不起作用。有人可以向我解释如何解决此问题吗？

Answer 1

每次setInterval将对fillSmallSpinner的呼叫排队时，它将收到其默认参数-一遍又一遍！

一种更常见的模式是用一种保留所需变量范围的方式包装函数：

const startFiller(callback, interval = 50, start = 0) {
    let current = startPoint;
    let timer = setInterval(() => {
        callback(current++);
        if (current >= 100) {
            clearTimeout(timer);
        }
    }, interval);
});

startFiller(fillSmallSpinner);

然后，您将从fillSmallSpinner函数中删除任何与计时器相关的现有逻辑。这种方法具有关注点分离的附加优点-如果您决定要使用其他函数来呈现微调器，则不再需要考虑计时器。

在箭头函数内部传递默认值

1 个答案: