2015-10-25 2 views
1

в этом коде Я меняю места divs одновременно, хотя я использовал 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> 

ответ

0

Try длительность настройки тайм-аута для 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>

+0

она работала большое спасибо :) – dummy

Смежные вопросы