Javascript 页面在设置超时时不更新？

我编写了一个脚本，它将读取文本文件，并尝试在数据集中使用用户输入的参数查找重复条目。由于数据集相当大，页面往往会冻结。我在这里引用了这篇文章：

使用setTimeout（）分块执行计算。我试图在页面上显示一个完成百分比，但在脚本运行完成（Chrome和Firefox）之前，它不会显示

这是我的泵功能：

function pump(initDataset, dataset, output, chunk){
    chunk = calculateChunk(initDataset, dataset, output, chunk);
    document.getElementById("d_notif_container").style.display="block";
    document.getElementById("d_percent").innerHTML = NOTIF_SEARCH_START + percentComplete + "%"; //This is a div 
    document.getElementById("i_pc").value = percentComplete; //This is an input text field

    if(percentComplete < 100){
        console.log("Running on chunk " + chunk);
        setTimeout(pump(initDataset, dataset, output, chunk), TIMEOUT_DELAY);
    } 
    else {
        comparisonComplete(output);
    }
}

函数泵（初始化数据集、数据集、输出、块）{
chunk=calculateChunk（initDataset，dataset，output，chunk）；
document.getElementById（“d_notif_容器”）.style.display=“block”；
document.getElementById（“d_percent”）.innerHTML=NOTIF_SEARCH_START+percentComplete+“%”//这是一个div
document.getElementById（“i_pc”）.value=percentComplete；//这是一个输入文本字段
如果（完成百分比<100）{
log（“在块上运行”+块）；
setTimeout（泵（initDataset、dataset、输出、区块）、超时\u延迟）；
} 
否则{
比较完成（输出）；
}
}

我尝试以两种不同的方式显示，使用innerHTML和value（两种不同的元素）。percentComplete是一个全局变量，在calculateChunk（）中更新

最奇怪的是，如果我检查这些元素中的一个，我可以看到HTML的变化计数百分比（在Chrome中）。它只是在脚本运行完成之前不会显示在实际页面上。我也尝试过将超时时间改为1000次，但运气不好

知道为什么会这样吗？

这段代码

setTimeout(pump(initDataset, dataset, output, chunk), TIMEOUT_DELAY);

调用

泵

并将其返回值传递到

设置超时

，与

foo（bar（））

调用

杆

并将其返回值传递到

foo

的方式完全相同

如果要在超时后使用这些值调用

泵

，可以使用

函数#bind

执行此操作：

setTimeout(pump.bind(null, initDataset, dataset, output, chunk), TIMEOUT_DELAY);
// ------------^^^^^^^^^^

Function#bind

返回一个新函数，该函数在调用时将使用给定的

this

值（第一个参数）和您给定的

bind

此代码的参数

setTimeout(pump(initDataset, dataset, output, chunk), TIMEOUT_DELAY);

调用

泵

并将其返回值传递到

设置超时

，与

foo（bar（））

调用

杆

并将其返回值传递到

foo

的方式完全相同

如果要在超时后使用这些值调用

泵

，可以使用

函数#bind

执行此操作：

setTimeout(pump.bind(null, initDataset, dataset, output, chunk), TIMEOUT_DELAY);
// ------------^^^^^^^^^^

---

Function#bind

返回一个新函数，该函数在调用时将使用给定的

此

值（第一个参数）和您提供的

bind

参数。谢谢其他人注意：不要忘记“null”。如果你这样做的话，就把你传递的数据搞砸了……效果很好。谢谢其他人注意：不要忘记“null”。如果你这样做的话，会把你传入的数据搞砸。。。