Javascript setInterval（）只触发一次

我试图在图像上传开始时每隔500毫秒更新一个变量，并在上传完成时将其值设置为100。代码如下：

var progress = 0
var $new = document.querySelector('#new');
var $imgupload = document.querySelector('#img-upload');
var $progress = document.querySelector('#progress');
var $percent = document.querySelector('#percent');
var interval = null;

function incrementProgress() {
    interval = window.setInterval(function() {
        $percent.innerHTML = progress+'%'
        $progress.setAttribute('value', progress)
        progress += 2;
        console.log('fired') // fires only once
    }, 500)
}

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            var $img = document.querySelector('#new');
            $img.setAttribute('src', e.target.result);
            $img.style.display = 'block';
        }

        reader.readAsDataURL(input.files[0]);
    }
}

//triggers the setInterval() and initiates image uploading

$imgupload.addEventListener('change', function() {
    incrementProgress();
    readURL(this);
});


//clears the setInterval() on image upload and sets the progress value as 100.

$new.addEventListener('load', function() {
    window.clearInterval(interval);
    $percent.innerHTML = 100+'%'
    $progress.setAttribute('value', 100)
})

问题：

图像上传一开始，

$progress

的值就被设置为

0

，并在图像上传后直接跳到

100

。预期的是，

$progess

变量每隔500ms增加

2

，这是没有发生的

编辑：

这是工作小提琴：

---

也许真正的进步会更好？只需将

setInterval

替换为

reader.onprogress

：

var$new=document.querySelector（'#new'）；
var$imgupload=document.querySelector（'img upload'）；
var$progress=document.querySelector（“#progress”）；
var$percent=document.querySelector（“#percent”）；
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onprogress=函数（e）{
var进度=数学轮（（e.loaded/e.total）*100）；
$percent.innerHTML=进度+“%”；
$progress.setAttribute（'value'，progress）；
}
reader.onload=函数（e）{
var$img=document.querySelector（'#new'）；
$img.setAttribute（'src'，e.target.result）；
$img.style.display='block'；
}
reader.readAsDataURL（input.files[0]）；
}
}
$imgupload.addEventListener（'change'，function（）{
readURL（this）；
});
$new.addEventListener（'load'，函数（）{
$percent.innerHTML=100+'%
$progress.setAttribute（'value'，100）
})

0%
上传

使用

setInterval

而不是

setTimeout

@gurvinder372它只是

setInterval

。我已经更正了我的问题。我猜您缺少一个分号，请检查浏览器的控制台是否有错误。@gurvinder372此代码中没有语法错误，OP已经在使用控制台。@gurvinder372代码语法正确。看起来很有希望！我会尽快试试这个。