每次迭代后延遲重新渲染視圖

Question

我實現了一個冒泡排序算法，我試圖在每次迭代后重新渲染 ui。 目前，在運行runBubbleSort()函數后，算法會立即終止並顯示正確的結果。 是否有可能在執行下一次循環迭代之前設置一個 50 毫秒的計時器？

runBubbleSort: function(event) {
    for (var j = 1; j < this.elements.length; j++) {
        for (var i = 0; i < this.elements.length - j; i++) {

            // set timer here

            if (this.elements[i] > this.elements[i + 1]) {
                var tmp = this.elements[i];

                this.$set(this.elements, i, this.elements[i + 1]);
                this.$set(this.elements, i + 1, tmp);
            }
        }
    }
}

Answer 1

你有幾種方法可以做到這一點

1. v-if 指令（不好的方式）

v-if指令，僅在組件為 true 時才渲染組件。 如果為 false，則該組件將根本不存在於 DOM 中。

您可以切換布爾變量以強制它重新渲染

<template v-if="show">
  <h1>Title</h1>
</template>

2. $vm.forceUpdate() （更好的方法）