时间戳

首页 > 解决方案 > 画布中的 Progresswheel 类型的东西不会以所需的百分比停止。开始未定义的价值

javascript - 画布中的 Progresswheel 类型的东西不会以所需的百分比停止。开始未定义的价值

问题描述

今天只是一个快速的（我希望）

下面的代码生成一个介于 0-28 之间的随机数，然后将该数字传递给我的进度条函数。进度条功能应该在达到生成的数字时停止，但事实并非如此，因为我的值未定义。有谁知道为什么？我正在寻找，但我只是看不到问题所在。任何你能解释它的光都将不胜感激 

 function getRandInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    var canvas = document.getElementById('myCanvas'); // to get the element
    var context = canvas.getContext('2d'); //to return drawing context on canvas
    var al=0; // use it for Amount loaded
    var start=4.72; //From where to start position of progress;
    var cw=context.canvas.width/2; //to get x cordinate;
    var ch=context.canvas.height/2; // to get y coordinate;

    //here width and height is divided by two so to get our progressbar in middle.

    var diff; //to load progress bar Slowly

    function progressBar(numGiven) {
        var perc = ((numGiven / 28) * 100);
        diff = (al / 100) * Math.PI * 2;
        context.clearRect(0, 0, 400, 200);
        context.beginPath();
        context.arc(cw, ch, 50, 0, 2 * Math.PI, false);
        context.fillStyle = '#FFF';
        context.fill();
        context.strokeStyle = '#e7f2ba';
        context.stroke();
        context.fillStyle = '#000';
        context.strokeStyle = '#b3cf3c';
        context.textAlign = 'center';
        context.lineWidth = 15;
        context.font = '10pt Verdana';
        context.beginPath();
        context.arc(cw, ch, 50, start, diff + start, false);
        context.stroke();
        // old value to show percent al + '%'
        context.fillText(numGiven + "/ 28", cw + 2, ch + 6);
        if (al >= perc) {
            clearTimeout(bar);
        }

        al++;
    }

    var bar = setInterval(progressBar, 50);

    //check for Navigation Timing API support
    if (window.performance) {
        alert("window.performance works fine on this browser");
    }
    if (performance.navigation.type == 1) {
        alert("This page is reloaded");            
        progressBar(getRandInt(0, 28))
    } else {
        alert("This page is not reloaded");
        progressBar(0);
    }

标签： javascriptcanvas

解决方案

通过快速查看您的代码，我注意到您使用 setInterval 定期更新进度条，但您使用 clearTimeout 清除它。您应该改用 clearInterval。让我知道这是错误的。

编辑：上面我注意到的事情是错误的。

您的间隔调用没有参数的 progressBar 函数，因此 numGiven 未定义。为了给你的函数提供数字，你应该删除你的 setInterval 并用这个替换你的progressBar函数中的条件：

if (al < perc) {
    setTimeout(function(){ progressBar(numGiven) }, 50);
}

如果您想改用间隔，则必须将 numGiven 设置为全局变量并直接在您的 progressBar 函数中访问它。

推荐阅读