Question

有什么办法可以在Vue.js中向用户报告重度javascript操作的进度？

我有下一个代码：

<p>{{currentProgress}}</p>

...

data: function() {
    return {
        isLoading : false,
        currentProgress: "",
    }
},
created: function() {
    globalLoading.subscribeOnChange((receivedLoading, progress) => {
        console.log("----> ", receivedLoading, progress);
        this.isLoading = receivedLoading;
        this.currentProgress = progress;

        this.$forceUpdate();
    });
},

在javascript中执行大而重的操作期间调用方法globalLoading.subscribeOnChange（即生成带jsPDF的pdf）。大约需要一分钟，我想对用户做出进展回复。

但是，在此过程中，我看不到currentProgress变量的任何更新，直到pdf生成结束。我甚至没有在开发人员工具（F12）的Vue.js控制台中看到更新。

我称这个操作很重，因为它肯定会加载浏览器 - 在这期间打开开发者工具甚至很难。但是如果我在操作之前打开它 - 我可以看到console.log输出，所以我知道这段代码正在运行。

this.$forceUpdate()没有帮助。

更新的重型操作的一个例子可能是这样的：

 methods: {
            testClick: function() {
                globalLoading.start("test");
                for (var i = 0; i < 1000000; i++) {
                    console.log("!");
                    globalLoading.updateProgress(i);
                    i++;
                }
            }
        },

我知道如果我使用setInterval而不是循环它会起作用，但我需要尽快完成繁重的操作 - 我不想将操作拆分成块

Vue.js：报告繁重操作的进度

0 个答案: