Javascript 为响应用户界面细分长时间运行的功能需要多少？

我有一个运行时间相当长（3到10秒）的函数，它在后台为页面中不常使用的部分加载数据。我的问题是，每次执行的最佳运行时间和两次执行之间的延迟时间是多少，以确保页面的其余部分保持相当的交互，但数据的加载不会因为拆分而过度延迟

例如：

var i = 0;
var chunkSize = 10;
var timeout = 1;
var data; //some array

var bigFunction = function() {
    var nextStop = chunkSize + i; //find next stop
    if (nextStop > data.length) { nextStop = data.length }

    for (; i < nextStop; i++) {
       doSomethingWithData(data[i]);
    }
    if (i == data.length) { setTimeout(finalizingFunction, timeout); }
    else { setTimeout(bigFunction , timeoutLengthInMs); }     
};

bigFunction(); //start it all off

var i=0；
var chunkSize=10；
var超时=1；
var数据//一些数组
var bigFunction=function（）{
var nextStop=chunkSize+i；//查找下一站
如果（nextStop>data.length）{nextStop=data.length}
对于（；i

---

现在，我已经做了一些测试，产生大约100毫秒执行时间和1毫秒超时的

chunkSize

似乎产生了一个响应速度非常快的UI，但我看到的一些示例建议使用更大的块（~300毫秒）和更长的超时（20到100毫秒）。将函数分割成太多的小块时，我是否错过了一些危险，或者尝试和错误是确定这些数字的安全方法？

1ms超时实际上不是1ms。当线程产生时，为了达到1ms，它可能会产生更多的时间-因为典型的线程时间片是30ms。任何数量的其他线程都可能在1ms超时期间执行，这可能意味着在您再次收到控制之前已经过了200ms

---

为什么不让“doSomethingWithData”在一个完全不同的线程中执行呢

任何小于15毫秒的超时值都是等效的-浏览器将更新DOM等，然后执行超时。有关更多信息，请参阅和。我倾向于使用

setTimeout（fn，0）

我会检查经过的时间，而不是猜测数字，因为正如Jason指出的，客户端之间会有速度差异：

var data; // some array
var i = 0;
var MAX_ITERS = 20; // in case the system time gets set backwards, etc
var CHECK_TIME_EVERY_N_ITERS = 3; // so that we don't check elapsed time excessively
var TIMEOUT_EVERY_X_MS = 300;

var bigFunction = function () {
    var maxI = i + MAX_ITERS;
    if (maxI > data.length) { maxI = data.length }

    var nextTimeI;
    var startTime = (new Date()).getTime(); // ms since 1970
    var msElapsed;

    while (i < maxI) {
        nextTimeI = i + CHECK_TIME_EVERY_N_ITERS;
        if (nextTimeI > data.length) { nextTimeI = data.length }

        for (; i < nextTimeI; i++) {
            doSomethingWithData(data[i]);
        }

        msElapsed = (new Date()).getTime() - startTime;
        if (msElapsed > TIMEOUT_EVERY_X_MS) {
            break;
        }
    }

    if (i == data.length) {
        setTimeout(finalizingFunction, 0);
    } else {
        setTimeout(bigFunction , 0);
    }
};

bigFunction(); //start it all off

var数据；//一些数组
var i=0；
var MAX_ITERS=20；//如果系统时间设置向后，等等
var检查时间间隔=3；//这样我们就不会过度地检查经过的时间
var TIMEOUT_EVERY_X_MS=300；
var bigFunction=函数（）{
var maxI=i+最大值；
如果（maxI>data.length）{maxI=data.length}
var nextTimeI；
var startTime=（新日期（））.getTime（）；//自1970年以来的毫秒数
var失效；
while（idata.length）{nextTimeI=data.length}
对于（；i每毫秒超时一次）{
打破
}
}
if（i==data.length）{
setTimeout（finalizingFunction，0）；
}否则{
setTimeout（bigFunction，0）；
}
};
bigFunction（）//开始吧

您确实意识到，作为机器的JavaScript（客户端）CPU、内存、网络连接等因素在很大程度上影响了性能。@Jason McCreary，当然。这就是为什么我要问这个问题，而不是假设我确定这些数字的试错方法是安全的。这是javascript：只有一个线程。至少，现在浏览器只有一个线程。在web Worker普及之前（90%以上的浏览器），我不指望有多个线程来执行我的javascript。我喜欢在实际客户端上计时的想法，尽管我认为我只需要使用第一次运行来获得每次迭代的大致平均时间，然后在此基础上将所有后续运行设置为合理的计数。