在js for循环中，如何做到延迟效果？

最近在做算法演示动画，但在js中遇到些许问题。

    function playbubbleSort(arr) {

        var len = arr.length;
        for(var i = 0; i < len - 1; i++) {
            for(var j = 0; j < len - 1 - i; j++) {
                if(arr[j] > arr[j+1]) {
                    var temp_left = parseInt(window.getComputedStyle(div_child_obj[j+1],null).getPropertyValue("left"));    
                    div_child_obj[j+1].style.left = window.getComputedStyle(div_child_obj[j],null).getPropertyValue("left");
                    div_child_obj[j].style.left = temp_left+"px";

                    var temp = arr[j+1]; 
                    arr[j+1] = arr[j];
                    arr[j] = temp;

                    let start = (new Date()).getTime();
                    while((new Date()).getTime() - start < 2000){
                        continue;
                    }

                }
            }
        }
        return arr;
    }

我想在if句结尾处写一个延迟，从而实现动画不是一瞬间结束，而是慢慢一步步进行。然而我在结尾处添加的

let start = (new Date()).getTime();
     while((new Date()).getTime() - start < 2000){
             continue;
     }

并不是我所预想的情况，实际运行过程中，是等待 (循环总次数x2) 秒，然后依旧是瞬间结束，请问有啥更好的解决方法吗

使用jquery animate：https://www.runoob.com/jquery/eff-animate.html

https://blog.csdn.net/zero_person_xianzi/article/details/89946486

用 setTimeout
https://www.jianshu.com/p/47c37f9d98d6