js排序动画模拟-插入排序

// 插入排序动画模拟的JavaScript示例
// 假设我们有一个数组和一个简单的DOM元素来显示排序过程

let arr = [5, 3, 8, 4, 2];
let container = document.getElementById('sortContainer'); // 假设有一个id为sortContainer的容器

function displayArray(arr) {
    // 清除之前的显示
    container.innerHTML = '';
    // 重新渲染数组
    arr.forEach((item, index) => {
        let div = document.createElement('div');
        div.style.width = `${item * 10}px`; // 假设每个元素的值决定了其宽度
        div.style.height = '20px';
        div.style.backgroundColor = 'skyblue';
        div.style.display = 'inline-block';
        div.style.margin = '2px';
        div.textContent = item;
        container.appendChild(div);
    });
}

function insertionSort(arr) {
    for (let i = 1; i < arr.length; i++) {
        let key = arr[i];
        let j = i - 1;

        // 显示当前状态
        displayArray(arr.slice(0, i + 1).concat(arr.slice(i + 1)));

        /* 
         * 这里的setTimeout仅用于模拟动画效果，实际动画中你可能需要更复杂的逻辑
         * 来控制DOM的更新和渲染，或者使用requestAnimationFrame等API
         */
        setTimeout(() => {
            while (j >= 0 && arr[j] > key) {
                arr[j + 1] = arr[j];
                j = j - 1;
            }
            arr[j + 1] = key;
            // 再次显示排序后的部分数组，以模拟动画
            displayArray(arr.slice(0, i + 1).concat(arr.slice(i + 1)));
        }, 500); // 假设每次移动间隔500毫秒
    }
}

// 初始显示数组
displayArray(arr);
// 开始排序
insertionSort(arr);

**注意**：

1. 上面的代码是一个简化的示例，用于在网页上模拟插入排序的动画效果。

2. `setTimeout` 用于模拟动画的延迟效果，实际开发中可能需要使用更高效的动画处理方法，如CSS动画或`requestAnimationFrame`。

3. 数组的元素值被假设为可以直接决定其显示宽度的数值，实际使用时可能需要调整以适应不同类型的元素。

4. 假设有一个HTML元素，其ID为`sortContainer`，用于显示排序过程中的数组元素。

5. 由于JavaScript的单线程特性，`setTimeout`并不会真正“暂停”代码的执行，而是将回调函数放入事件循环的队列中等待执行。因此，动画的流畅度可能受到浏览器解析和执行JavaScript代码速度的影响。