时间戳

首页 > 解决方案 > 在箭头函数内传递默认值

javascript - 在箭头函数内传递默认值

问题描述

我正在使用这部分代码，其中一个呈现简单的加载栏

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% 的预定义起点这样做时，它不起作用。有人可以解释我如何解决这个问题吗？

标签： javascript

解决方案

每次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函数中删除任何现有的与计时器相关的逻辑。这种方法具有关注点分离的额外好处- 如果您决定要使用不同的函数来呈现您的微调器，它不再需要关注计时器。

推荐阅读