Javascript 在函数的循环内动态更改元素的innertext

问题：输入更高的数字（如10000）时，新段落元素的innertext仅在for循环结束后更新。请帮助更新每个数字的内部文本

当向输入元素发送数字作为输入后发生onchange事件时，将调用increment函数

JAVASCRIPT:

function increment() {
    var count = document.getElementById('ac_count').value; //ac_count is the id of the input element
    var stat = document.createElement("p");
    stat.id = "current_status";
    stat.innerText = "";
    document.body.appendChild(stat);
    stat.style.display = "block";
    for (g = 1; g < count; g++) {
        stat.innerText = Number(g + 1) + " out of " + count + " records have been processed";
    }
}

函数增量（）{
var count=document.getElementById（'ac_count'）。value；//ac_count是输入元素的id
var stat=document.createElement（“p”）；
stat.id=“当前状态”；
stat.innerText=“”；
document.body.appendChild（stat）；
stat.style.display=“block”；
对于（g=1；g

我并不是说这是一个好的解决方案，但这应该达到您所期望的效果

function increment() {
    var count = document.getElementById('ac_count').value; //ac_count is the id of the input element
    var stat = document.createElement("p");
    stat.id = "current_status";
    stat.innerText = "";
    document.body.appendChild(stat);
    stat.style.display = "block";
    updateInnerText(0, count);
}

function updateInnerText(number, max){
    if(number < max){
        stat.innerText = Number(number + 1) + " out of " + count + " records have been processed";
        setTimeout(function(){
            updateInnerText(number+1, max);
        }, 500);
    }
}

函数增量（）{
var count=document.getElementById（'ac_count'）。value；//ac_count是输入元素的id
var stat=document.createElement（“p”）；
stat.id=“当前状态”；
stat.innerText=“”；
document.body.appendChild（stat）；
stat.style.display=“block”；
updateInnerText（0，计数）；
}
函数updateInnerText（数字，最大值）{
如果（数量<最大值）{
stat.innerText=Number（Number+1）+“共有”+count+“条记录已处理”；
setTimeout（函数（）{
updateInnerText（数字+1，最大值）；
}, 500);
}
}

我并不是说这是一个好的解决方案，但这应该达到您所期望的效果

function increment() {
    var count = document.getElementById('ac_count').value; //ac_count is the id of the input element
    var stat = document.createElement("p");
    stat.id = "current_status";
    stat.innerText = "";
    document.body.appendChild(stat);
    stat.style.display = "block";
    updateInnerText(0, count);
}

function updateInnerText(number, max){
    if(number < max){
        stat.innerText = Number(number + 1) + " out of " + count + " records have been processed";
        setTimeout(function(){
            updateInnerText(number+1, max);
        }, 500);
    }
}

函数增量（）{
var count=document.getElementById（'ac_count'）。value；//ac_count是输入元素的id
var stat=document.createElement（“p”）；
stat.id=“当前状态”；
stat.innerText=“”；
document.body.appendChild（stat）；
stat.style.display=“block”；
updateInnerText（0，计数）；
}
函数updateInnerText（数字，最大值）{
如果（数量<最大值）{
stat.innerText=Number（Number+1）+“共有”+count+“条记录已处理”；
setTimeout（函数（）{
updateInnerText（数字+1，最大值）；
}, 500);
}
}

在执行线程空闲之前，DOM不会重新绘制。您需要在代码中引入异步延迟才能看到渐进式更新

函数增量（）{
var count=document.getElementById（'ac_count'）。值；
var stat=document.createElement（“p”）；
stat.id=“当前状态”；
document.body.appendChild（stat）；
var g=1
var itvl=setInterval（函数（）{
更新（g）；
g+=Math.floor（Math.random（）*20）+1
如果（g>=计数）{
净距（itvl）；
更新（计数）；
}
}, 10)
功能更新（g）{
stat.textContent=g+“+count+”记录中有一条已处理”；
}
}

单击我

直到执行线程空闲，DOM才会重新绘制。您需要在代码中引入异步延迟才能看到渐进式更新

函数增量（）{
var count=document.getElementById（'ac_count'）。值；
var stat=document.createElement（“p”）；
stat.id=“当前状态”；
document.body.appendChild（stat）；
var g=1
var itvl=setInterval（函数（）{
更新（g）；
g+=Math.floor（Math.random（）*20）+1
如果（g>=计数）{
净距（itvl）；
更新（计数）；
}
}, 10)
功能更新（g）{
stat.textContent=g+“+count+”记录中有一条已处理”；
}
}

单击我

我猜循环运行得太快了，以至于你根本没有注意到其他数字。如果要使其可见，请尝试使用

setTimeout

，可能还可以使用

递归

函数来降低速度。我给出了一个更大的数字，如10000，它需要大约5秒钟才会出现以下文本：“10000条记录中的10000条已被处理”。在for循环中使用console.log时，我可以看到“10000条记录中有2条已被处理”到“10000条记录中有9999条已被处理”我猜循环运行得太快了，你甚至没有注意到其他数字。如果要使其可见，请尝试使用

setTimeout

，可能还可以使用

递归

函数来降低速度。我给出了一个更大的数字，如10000，它需要大约5秒钟才会出现以下文本：“10000条记录中的10000条已被处理”。在for循环中使用console.log时，我可以看到“10000条记录中有2条已被处理”直到“10000条记录中有9999条已被处理”这句话！这就是我想要的。非常感谢你！好极了，伙计！这就是我想要的。非常感谢你！