我正在做一個專案來幫助可視化排序演算法，但我正面臨一個問題。
為了幫助可視化演算法的排序程序，我必須顯示在該程序中陣列中的每一個變化。
問題是我的陣列僅在排序完成后才在我的視圖中更新，而不是在此程序中。
我的陣列中只有整數。
這是我顯示陣列的代碼：
<span *ngFor="let v of tab">
{{v}}
</span
這是我的控制器：（超時用于減慢行程）
public sort(tab) {
let start = performance.now();
console.log(start);
let smallest;
for (let i = 0; i < tab.length; i ) {
smallest = tab[i];
for (let j = i 1; j < tab.length; j ) {
setTimeout(() => { }, 100000);
if (tab[j] < smallest) {
let tmp = tab[j];
tab[j] = smallest;
tab[i] = tmp;
smallest = tmp;
//This doesn't update the view
this.tab = tab;
}
}
}
//This does
this.tab = tab;
let end = performance.now();
console.log(end);
this.time = end - start;
演算法可能不是最有效的，但事實并非如此^^。
uj5u.com熱心網友回復：
這是因為
setTimeout(() => { }, 100000);
不是同步操作。它不會為下一個操作等待 100000 毫秒，它只會繼續同步操作并安排其他時間的超時（您可以閱讀 javascript 中的事件回圈以了解該部分）
有幾種方法可以解決這個問題，您可以進行遞回（不是很好），您可以創建一個異步函式（您可以在 javascript 中閱讀有關 async/await 的內容），并且您可以使用 RxJS 的回應式方法（Angular 已經在使用它了） )，所以類似：
const sort = (tab: number []) => {
let smallest: number;
// First "loop" (iterate i (0, 1, 2, 3 ...))
range(0, tab.length)
.pipe(
// Set smallest
tap(i => smallest = tab[i]),
// Second loop (i 1, i 2, i 3 ...) and map i and j to [i, j]
mergeMap((i: number) => range(i 1, tab.length - i - 1).pipe(map(j => [i, j]))),
// Make delay
concatMap(x => of(x).pipe(delay(1000)))
).subscribe(([i ,j]) => {
if (tab[j] < smallest) {
[tab[i], tab[j]] = [tab[j], tab[i]];
smallest = tab[j];
// Here if you can set
// this.tab = tab; and you will see changes
}
})
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/323884.html