코드 종료가 완료 될 때까지 for 루프가 대기합니다. 자바 스크립트

스왑이 발생하면 시각적으로 표시해야하는 버블 정렬 기능이 있습니다. 그러나 많은 접근법 후에 애니메이션을 멈추지 않고 루프를 계속 실행합니다. (우리는 JavaScript 만 사용할 수 있습니다). 웹 사이트에 애니메이션이 완료 될 때까지 기다릴 수있는 방법이 있습니까? @cookie 괴물 이미 설명코드 종료가 완료 될 때까지 for 루프가 대기합니다. 자바 스크립트

for (var i = 0; i < len; i++) 
{ 

    for (var j = 0, swapping, endIndex = len - i; j < endIndex; j++) 
    { 
     if (marksArr[j] > marksArr[j + 1]) 
     { 
      //swap objects 




      /*(function() { 
       var k = 0, 
        action = function() { 
         document.getElementById(coursesKey[j]).style.top = (parseInt(document.getElementById(coursesKey[j]).style.top) + 1) + 'px'; 
         document.getElementById(coursesKey[j + 1]).style.top = (parseInt(document.getElementById(coursesKey[j+1]).style.top) - 1) + 'px'; 

         k++; 
         if (k < difMoves) { 
          setTimeout(action, 200); 
         } 
        }; 

       setTimeout(action, 200); 
      })();*/ 



     } 
    } 
}

출처

2014-04-06 user2342875

루프 대기 * 및 * 브라우저 다시 그리기가 불가능합니다. 차단 코드가있는 한 UI를 업데이트 할 수 없으며 차단하지 않으면 루프가 계속됩니다. 한 가지 간단한 방법은 모든 시각적 업데이트를 Array로 푸시 한 다음 루프가 완료된 후'setInterval()'또는'setTimeout()'을 사용하여 배열의 내용을 브라우저에 인쇄하는 것입니다. –

이 함수로 이동하는 방법을 말할 수 없으며 함수가 완료되면 for 루프를 계속 진행할 수 있습니까? – user2342875

'setTimeout'을 사용하지 않을 때. 당신이 설명하는 것은 루프를 막는 것입니다. 'setTimeout'없이 함수를 호출함으로써 그렇게 할 수 있지만, 루프가 완료 될 때까지 UI는 업데이트되지 않습니다. 당신이 원하는 것은 루프를 제자리에두고 UI가 당신이 만든 업데이트를 반영하도록하는 것입니다. JavaScript에서는 불가능합니다. –

, 당신은 자바 스크립트에서 루프를 차단할 수 없습니다 자바 스크립트는 기본적으로 단일 스레드이기 때문입니다 (같은 시간에 setTimeout()를 사용하여 UI를 업데이트 : 여기 내 코드의 조각이다).

가장 좋은 해결책은 for 루프가 배열을 처리하는 동안 각 애니메이션 단계를 "녹화"한 다음 나중에 애니메이션을 실행하는 것입니다. setTimeout()을 사용하십시오. 얼마 전 StackOverflow에서 비슷한 질문 인 I've implemented this approach; 코드도 간단하게 할 수 JSFiddle

: 여기 데모입니다

function swap(list, i1, i2) { 
    var tmp = list[i1]; 
    list[i1] = list[i2]; 
    list[i2] = tmp; 
} 

function animateBubblesort(list) { 
    var animationSteps = []; 

    // Sort array 
    for (var n = list.length; n > 1; --n) { 
     for (var i = 0; i < n-1; ++i) { 
      if (list[i] > list[i+1]) { 
       swap(list, i, i+1); 
       // Add new step (clone of current array) to "animation queue" 
       animationSteps.push(list.slice(0)); 
      } 
     } 
    } 

    // Print animated steps (using setInterval() for simplicity) 
    var count = 0, 
     interval = setInterval(function(){ 
      console.log(animationSteps[count]); 
      if (++count >= animationSteps.length) { 
       clearInterval(interval); 
      } 
     }, 250); 
} 

animateBubblesort([5,8,2,4,1,9,7,3,0,6]);

DEMO

는 또 다른 (이하 직관적) 가능성에 대한 제어를 얻기 위해 루프없이 알고리즘을 구현하는 것이 때 알고리즘의 다음 단계가 실행됩니다 (따라서 애니메이션 시간이 있습니다). 예를 들면 다음과 같습니다. DEMO 2

출처

2014-04-07 01:15:30 Aletheios

코드 종료가 완료 될 때까지 for 루프가 대기합니다. 자바 스크립트

답변

관련 문제