延迟交换数组元素

Question

在这段代码中，我同时更改了我的 div 位置，即使我使用了 setTimeout() 但我想延迟显示更改，就像一个接一个。我该怎么做？

 <body>
    <button onclick="func()">Click</button>
    </body>

    <script>

    var arr=[4,7,1,9,8,13,6,11];
    function showarray(){

        for (var i=0;i<arr.length;i++)
        {

        var divSort = document.createElement("div");
        divSort.style.width = 30+"px";
        divSort.style.height = 30+"px";
        divSort.style.background = "yellow";
        divSort.style.display = "inline-block";
        divSort.style.margin = "10px";
        divSort.id=arr[i];
        divSort.innerHTML=arr[i];
        document.body.appendChild(divSort);

        }
    }

    showarray();

    function func(){

                 for (var i = 1; i < arr.length; i++) {
                if(arr[i]<arr[i-1]){

                        doSetTimeout(i);

            }};}

     function doSetTimeout(i) {
      setTimeout(function(){$("#"+arr[i]).insertBefore("#"+arr[i-1]);}, 1000);}


    </script>

Answer 1

尝试将超时持续时间设置为 i * 1000

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<body>
  <button onclick="func()">Click</button>
</body>

<script>
  var arr = [4, 7, 1, 9, 8, 13, 6, 11];

  function showarray() {

    for (var i = 0; i < arr.length; i++) {

      var divSort = document.createElement("div");
      divSort.style.width = 30 + "px";
      divSort.style.height = 30 + "px";
      divSort.style.background = "yellow";
      divSort.style.display = "inline-block";
      divSort.style.margin = "10px";
      divSort.id = arr[i];
      divSort.innerHTML = arr[i];
      document.body.appendChild(divSort);

    }
  }

  showarray();

  function func() {

    for (var i = 1; i < arr.length; i++) {
      if (arr[i] < arr[i - 1]) {

        doSetTimeout(i);

      }
    };
  }

  function doSetTimeout(i) {
    setTimeout(function() {
      $("#" + arr[i]).insertBefore("#" + arr[i - 1]);
    }, i * 1000);
  }
</script>

延迟交换数组元素

swap array elements with delay

jquery

settimeout