Вещество типа прогрессив в колесе не останавливается на желаемом проценте. Получить неопределенное значение

Question

сегодня быстро (надеюсь)

Приведенный ниже код генерирует случайное число в диапазоне от 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);
    }

Answer 1

Быстро просматривая ваш код, я заметил, что вы используете setInterval для периодического обновления индикатора выполнения, но очищаете его с помощью clearTimeout. Вы должны использовать clearInterval вместо этого. Дайте мне знать, что это ошибка.

Редактировать : Выше я заметил, что это неправильно.

Ваш интервал вызывает вашу функцию progressBar без параметров, поэтому numGiven не определен. Чтобы присвоить номер вашей функции, вы должны удалить свой setInterval и заменить условие внутри вашей функции progressBar следующим образом:

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

Если вы хотите использовать вместо этого интервал, вы должны установить numGiven как глобальную переменную и получить к ней доступ непосредственно в вашей функции progressBar.