JavaScript脚本阻塞用户界面线程。

Question

我的js脚本计算大量数据。例如，sql.js更新我的sqlite数据库。我想创建一个带有进度条和文本的回调函数。但是html网页中的文本总是在所有计算完成之前不会更新。

$array.each(function(index){
// CODE CODE CODE

        $("#pbData").text(index + ' PROGRESS');
        add_line_to_db(db,table_name,name,text);
// CODE CODE CODE
    });

我尝试使用类似以下的内容

$array.each(function(index){
// CODE CODE CODE
        setTimeout(function(){$("#pbData").text(index + ' PROGRESS');},1);
        add_line_to_db(db,table_name,name,text);
// CODE CODE CODE
    });

但这没起到作用。

如何修复？

编辑

我正在使用sql.js脚本创建一个sqlite数据库。 该脚本循环遍历表格并将数据存储到我的数据库中。 用户想要看到表格循环的进度条。因此，我希望为每个sql请求的迭代创建回调函数。

- Vyacheslav

---

你在each循环中仍然在做以前的相同工作，所以如果这是“阻塞”的原因，那么到目前为止你还没有做任何事情——在其中添加几个setTimeout并不会改变循环的操作。如果在这种情况下使用setTimeout（它可能并不总是最好的解决方案），那么它被用于通过调用一个处理数据小块的函数来替换循环，并进行重复处理（有点类似递归）。 - CBroe

@SheraliTurdiyev 一些用于 SQL 请求的数据。ID 和值。 - Vyacheslav

@SheraliTurdiyev，你的代码出现了错误：'未捕获的数据库关闭'。 - Vyacheslav

@trololo，为什么要创建回调函数？请用易懂的方式解释一下你的问题。 - Sherali Turdiyev

@trololo，我回答了你的问题，请检查一下。如果不行，请告诉我。 - Sherali Turdiyev

Answer 1

Javascript是单线程的，任何在该线程上运行的代码都会自动阻塞UI。

如果您有很多异步工作要完成，请尝试使用WebWorker并行运行代码。

请查看MDN关于Javascript事件循环的页面：https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

或者这个：http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/

还有一个非常好的工具可以直观地模拟事件循环的操作，这里

- toskv

---

很遗憾，但你是对的。只有 Web Worker 能够帮助。 - Vyacheslav

Answer 2

尝试使用这种方式来替代each()迭代。我认为它能够工作。但这不是最佳的方式，因为插入时间是不同的。

var i = 0, howManyTimes = array.length, timeForInserting = 3000;
function iterate() {
    //other codes
    $("#pbData").text(i + ' PROGRESS');
    add_line_to_db(db,table_name,name,text);

    //other codes

    i++;
    if( i < howManyTimes ){
        setTimeout( iterate(), timeForInserting );
    }
}
iterate();

如何在JavaScript循环中添加延迟？

- Sherali Turdiyev

---

不好意思，它不起作用。sql.js会完全冻结用户界面。无论如何，谢谢。 - Vyacheslav