如何让javascript“呼吸”

Question

我有一些javascript/jquery代码(用于内部网站)，它在大型表上进行大量客户端处理。它运行得有点慢，但没关系。

问题是，它在运行需要执行的循环时冻结了浏览器。这有两个不受欢迎的影响：

1. 处理旋转器(一个动画gif，但我也尝试了spin.js，也有同样的问题)冻结。
2. 如果表中有足够多的行，则循环需要很长时间，浏览器报告一个没有响应的脚本。

有什么方法可以让我在代码中有某种“呼吸”语句，比如每一次(比如说)100个迭代，它就停下来让旋转器旋转，浏览器知道脚本还在运行吗？类似于(伪代码)：

for (i=0;i<20000;i++)
{
    fnProcessRow();
    if (i % 100 == 0) breath();
}

Answer 1

分解javascript的一种方法是将处理分成块，并使用setTimeout()来执行下一个“块”

如果你需要一些代码来告诉你我的意思。

Answer 2

由于它非常具体地取决于您的代码，因此没有进行此操作的set方法。像这样的东西会有用的：

fnProcessRows(0, 10000);

function fnProcessRows(start, end) {
    /* do row processing */

    if (end < totalRows) {
        setTimeout(function () {
            fnProcessRows(start + 10000, end + 10000);
        }, 1000);
    }
});

这将处理10000行，其间有一秒的中断。这可能会产生一些奇怪的副作用，比如显示“已处理”行和“未处理”行，这可能是不可取的。如果不是，那么这应该是一个非常简单的解决方案。

当然，如果仍然没有响应，您可以将10000减少到其他东西；它应该只在很短的时间内没有响应，用户会很难注意到。

Answer 3

见this question。

如果不想走setTimeout/setInterval路由，请尝试添加：

if (i % 100) { $("selector for your animated image").width(); }

在一些(大部分？)将强制其重新布局和呈现的浏览器。