时间戳

首页 > 解决方案 > 使用 jQuery 和 JavaScript 模拟选择排序算法的动画问题

javascript - 使用 jQuery 和 JavaScript 模拟选择排序算法的动画问题

问题描述

我正在尝试可视化选择排序算法。动作开始正常工作，数组元素反转，但突然间，在最后一次迭代中，一切都变得一团糟，如图所示。我无法弄清楚问题所在。

async function selectionSort(main_arr) {

    for (var i=0; i<main_arr.length; i++)
    {   
        var min_ind=i;
        for(var j=i+1; j<main_arr.length; j++)
        {
            if(main_arr[min_ind]>main_arr[j])
            {
                min_ind=j;
            }
        }
        if(min_ind!=i)
        {
            var temp=main_arr[min_ind];
            main_arr[min_ind]=main_arr[i];
            main_arr[i]=temp;
            var offbig=$('.slot'+min_ind).offset().left,offsmall=$('.slot'+i).offset().left;
            
            $(".slot"+min_ind).animate(
                {
                    right:offbig-offsmall
                }
            ,500);
            
            $(".slot"+i).animate(
                {
                    left:offbig-offsmall
                }
            ,500);
            
            await sleep(1000);
        }
        
    }
}

在此处输入图像描述

标签： javascriptjquery

解决方案

问题是尽管您已经对数组本身进行了变异，但您也没有考虑过该类。您使用.slotXX 是其在数组上的索引的类。你也需要改变这个类。您可以在 的回调中执行此操作，animation以便在动画之后，您将在 CSS 类中拥有正确的排序数组“顺序”。

最后，我不建议在这种情况下left同时使用 CSS 属性。right

当 left 和 right 都被定义时，如果没有其他属性阻止这样做，元素将拉伸以满足两者。如果元素不能拉伸以同时满足两者——例如，如果声明了宽度——则元素的位置被过度约束。在这种情况下，当容器从左到右时，左值优先；当容器从右到左时，正确的值优先。

您可以在CSS Left和CSS Right阅读更多内容。

您可以简单地继续使用left属性来移动您的容器。在这种情况下，我left相对于它的当前位置改变了它们的新属性。

async function selectionSort(main_arr) {

    for (var i=0; i<main_arr.length; i++)
    {   
        var min_ind=i;
        for(var j=i+1; j<main_arr.length; j++)
        {
            if(main_arr[min_ind]>main_arr[j])
            {
                min_ind=j;
            }
        }
        if(min_ind!=i)
        {
            var temp=main_arr[min_ind];
            main_arr[min_ind]=main_arr[i];
            main_arr[i]=temp;
            
            var offbig = $('.slot'+min_ind).offset().left
            var offsmall = $('.slot'+i).offset().left 
            
            $(".slot"+min_ind).animate(
                {
                    left:parseFloat($(".slot"+min_ind).css("left").replace("px", "")) - (offbig-offsmall)
                }
            ,500);
            
            $(".slot"+i).animate(
                {
                    left:parseFloat($(".slot"+i).css("left").replace("px", "")) + (offbig-offsmall)
                }
            ,500, function(){
                $('.slot'+i).removeClass('slot'+i).addClass('slot'+min_ind).addClass('temp');
                $('.slot'+min_ind).not('.temp').removeClass('slot'+min_ind).addClass('slot'+i);
                $('.temp').removeClass('temp');
            });
            
            await sleep(1000);
        }
        
    }
}

推荐阅读