我正在尝试从用户获取数组后实现冒泡排序可视化

Question

我正在尝试在 DOM 中从用户那里获取数组后实现冒泡排序可视化。我使用 setTimeout 来延迟循环但它不起作用，循环执行速度很快，并且在使用 setTimeout 时跳过了一些迭代。它在没有 setTimeout 的情况下工作正常.我想减慢排序速度，以便人们可以想象。

 var btn1=document.getElementById("btn"); var btn2=document.getElementById("clr"); var btn3=document.getElementById("start"); var container=document.getElementById("contain"); let squares=[]; let timeout=1000; btn1.onclick=function display(){ var j=0; var i=0; swap=0; var temp=array.value; const result=temp.split(" "); for(i=0;i<result.length;i++) { var array_item=document.createElement("div"); array_item.setAttribute("id",i+1); array_item.innerHTML=result[i]; array_item.classList.add("box"); container.append(array_item); squares.push(array_item); } } btn3.onclick=function bubble_sort(){ for(i=0;i<squares.length-1;i++){ for(j=0;j<squares.length-i-1;j++){ setTimeout(()=>{ console.log(squares[i].innerHTML); if(parseInt(squares[j].innerHTML)>parseInt(squares[j+1].innerHTML)){ if(j>0){ squares[j-1].classList.remove("active") squares[j].classList.remove("active") } squares[j].classList.add("active") squares[j+1].classList.add("active") setTimeout(()=>{ swap=squares[j].innerHTML; squares[j].innerHTML=squares[j+1].innerHTML; squares[j+1].innerHTML=swap; },1000) if(j===squares.length-i-2){ setTimeout(()=>{ squares[j].classList.remove("active") squares[j+1].classList.remove("active") },2000) } } },2000) timeout+=2000; } } array.value=""; } btn2.onclick=function reset(){ while(container.firstChild) { container.removeChild(container.firstChild); } while(squares.length){ squares.pop(); } }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="linearsearch.css"> <title>Document</title> </head> <body> <div class="main"> <div class="search"> <h1>Bubble-Sort</h1> <label for="array-elements" id="labl">Enter array elements</label> <input type=" text" id="array-elements" name="array-elements" placeholder="separated with space"><br> <!--<label for="item">Enter array element to search for</label> <input type="text" id="item"><br>--> <div class="buttons"> <button id="btn" class="button">insert</button><br> <button id="start" class="button">start</button><br> <button id="clr" class="button">Clear</button><br> </div> <div class="contain" id="contain"></div> </div> </div> <script src="linearsearch.js"></script> </body> </html>

Answer 1

这在 ES6 中比较简单：

let a = [33, 103, 3, 726, 200, 984, 198, 764, 9];
// encapsulate setTimeout in a promise, so we can await it below
const wait = (timeout)=>{
    return new Promise((resolve)=>{
        setTimeout(resolve, timeout)
    })
}
// bubbleSort implementation copy-pasted from https://stackoverflow.com/a/37901176/3083470 - use yours of course
async function bubbleSort(a) {
    let swapped;
    do {
        swapped = false;
        for (let i=0; i < a.length-1; i++) {
            if (a[i] > a[i+1]) {
                let temp = a[i];
                a[i] = a[i+1];
                a[i+1] = temp;
                swapped = true;
                console.log(`swapped ${a[i]} and ${a[i + 1]}`)
                // here's where we wait for a predefined amount of time
                // you might want to move this outside the if to pause after every comparison, not only every swap
                await wait(1000);
            }
        }
    } while (swapped);
}

bubbleSort(a);

如果您不能使用 ES6，则方法可能如下所示：

• 制作一个只执行一步排序的函数
• 像这样从递归函数调用它（假设您保留在函数外部定义的数组）：

function sortOneStep(currentIndex, swapped){
    // TODO: implement one step of sorting
    return [currentIndex + 1, swapped];
}

function loop(currentIndex, swapped) {
    var result = sortOneStep(currentIndex, swapped);
    var newIndex = result[0];
    var swapped = result[1];
    if(newIndex >= arrayToSort.length - 1){
        // we traversed the array fully. are we done yet?
        if(swapped){
           // nope, we're not done
           newIndex = 0;
           swapped = false;
        } else {
            // Yup, array is sorted
            return;
        }
    }
    setTimeout(function(){
       loop(newIndex, swapped);
    }, 2000);
}