Quiero hacer una visualización de barra de muchos algoritmos de clasificación, comencé con la clasificación de burbujas por simplicidad. Necesito actualizar el dom a medida que cambia los elementos, pero solo lo actualiza después de ordenar todos los elementos. Busqué esto y todo decía usar tick, pero todavía no puedo hacerlo funcionar, aquí está mi código:
<script> import { tick } from 'svelte'; let arr = []; async function bubbleSort () { let len = arr.length; for (let i = 0; i < len; i++) { for (let j = 0; j < len; j++) { if (arr[j] > arr[j + 1]) { let tmp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = tmp; await tick(); setTimeout(() => { console.log("World!"); }, 2000); } } } console.log(arr) } function shuffle () { arr = []; for (let i = 0; i < 100; i++) { let num = Math.random()*10+1; arr.push(Math.floor(num)); } console.log(arr) } console.log(bubbleSort(shuffle())) </script> <main> <button on:click={shuffle}>Shuffle</button> <button on:click={bubbleSort}>Sort</button> {#each arr as el, i} <div id={i} style="position: relative;height: {el*100}px;"></div> {/each} </main> <style> div { background: #000000; width: 5px; display: inline-block; margin: 0 1px; } </style>Lo siento si esto es simple, pero soy muy nuevo en svelte, js y desarrollo web en general. ¡Gracias!
Aquí está el script arreglado:
<script> let arr = []; function sleep(time){ return new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, time); }); } async function bubbleSort () { let len = arr.length; for (let i = 0; i < len; i++) { for (let j = 0; j < len; j++) { if (arr[j] > arr[j + 1]) { let tmp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = tmp; await sleep(1) } } } console.log(arr) } function shuffle () { arr = []; for (let i = 0; i < 100; i++) { let num = Math.random()*10+1; arr.push(Math.floor(num)); } console.log(arr) } console.log(bubbleSort(shuffle())) </script> <main> <button on:click={shuffle}>Shuffle</button> <button on:click={bubbleSort}>Sort</button> {#each arr as el, i} <div id={i} style="position: relative;height: {el*100}px;"></div> {/each} </main> <style> div { background: #000000; width: 5px; display: inline-block; margin: 0 1px; } </style> La función de sleep se basa en el código que se encuentra en la documentación de MDN sobre promesas: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#chained_promises
En realidad, no es tan fácil dormir en Javascript porque está diseñado para nunca dejar de ejecutarse.
Probablemente necesitará estudiar cómo funcionan las promesas y async - await para comprender por qué funciona esto.
Por cierto, su código actualizó el DOM pero se ejecutó en una fracción de segundo porque hubo muy poco retraso. El método tick que usó detiene el script solo hasta que finaliza la actualización del DOM en función de los cambios anteriores, que suele ser un tiempo muy, muy corto.