为响应式UI细分长时间运行功能需要多少钱？

Question

我有一个相当长的运行(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

现在,我已经完成了一些测试,并且chunkSize产生大约100毫秒的执行时间和1毫秒timeout似乎产生了非常灵敏的UI,但是我见过的一些例子推荐更大的块(~300毫秒)和更长的超时(20到100毫秒).我是否错过了将我的功能削减到太多小块的危险,或者试错是一种确定这些数字的安全方法？

Answer 1

任何小于大约 15ms 的超时值都是等效的 - 浏览器将更新 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