如何在后台任务完成时更新 UI？

Question

我有一个 VUE 应用程序，当用户单击一个按钮时，它会在几秒钟内执行后台任务，冻结所有 UI

.vue 文件：

....
methods:{
    do_task(){
         this.calculator.calculate() //this takes a lot of seconds and the UI freeze
    }
}

calculator.calculate() 就像一个需要时间的嵌套循环

寻找解决方案，最好不要全部冻结广告（后台任务模式），而且每秒至少刷新两次 UI 也可以（向用户反馈一些进度）

我怎样才能做到这一点？

Answer 1

您可能正在运行阻止 UI 更新的阻塞操作。

如果您只想让反应性进行更新，例如通知用户该过程正在发生并且可以让它在接下来的 10 秒内挂起，您可以通过setTimeout(this.do_task, 0) 。 设置 0 会将执行置于当前序列/管道的末尾，因此您的 UI 可能会在流程开始之前更新。 如果这对你有用，这可能是最简单的方法，不需要任何重构。

或者，您可以重构您的函数以进行批处理，以便一次只处理少量的记录/条目/对象（无论您正在处理什么）。 很难给出确切的细节，因为没有可用的代码。 但是您可以通过使用promises甚至生成器函数来完成此操作（请注意，它并不完全适合初学者）

您还可以将工作卸载到网络工作者，这会将处理移出主线程。