javascript - javascript脚本阻塞ui线程

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 请求迭代创建一个回调函数。

Answer 1

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

如果您有大量异步工作要做，请尝试使用 WebWorker 并行运行代码。

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

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

还有一个非常好的工具可以直观地模拟事件循环的作用here