Question

我在创建跟踪VueX变异实时进度的进度条时遇到问题。

我有一个按钮组件，当用户单击按钮时会运行突变。此突变通过一个数组并对数组中的每个项执行一个函数。在执行此功能时，它会更新“进度”。商店中的状态。我有一个进度条组件，可以读取此进度＆＃39;来自商店的状态作为计算属性。

我希望随着进度状态的更新，进度条会更新，但似乎我遇到了DOM的问题在更新时尽快呈现更改。我的变异运行，进度条从0变为100，中间没有更新。

我想我有一个问题是概念化为什么我的DOM不会像我更新＆＃39;进展那样快速重绘。状态以及是否有任何方法可以实现此目的

Answer 1

我发现＆＃39; For＆＃39;循环我用来处理我的数组＆＃39;冻结＆＃39; dom并阻止它重新渲染。为了解决这个问题，我使用了一个＆＃39; setTimeout＆＃39;呼叫。这似乎是一个黑客，但希望能帮助那些遇到这个问题的人。更多答案赞赏。感谢@Eric Guan让我走上了这条道路。我在这里找到了另一篇文章的答案 - ＆gt; How to stop intense Javascript loop from freezing the browser

var self = this;
        var animals = ['dog', 'cat','lion','tiger','bear'];
        var processing = function() {               
            var animal = animals.shift();
            console.log(animal);
            if (animals.length > 0) {
                console.log(animals.length);
                var timer = setTimeout(processing, 1000);
                self.$store.commit('updateStatus', {progress : animals.length*20, msg: 'Progress Bar Test', status: 'processing', display: true});
            } else {
                console.log('clearing timeout');
                self.$store.commit('updateStatus', {progress : 100, msg: 'Progress Bar Test', status: 'processing', display: false});
                clearTimeout(timer);
            }
        }
        processing();

VueJs Progress Bar跟踪VueX变异进度

1 个答案: