3 초 정지가 루프 안에있는 경우 페이지가 멈춤

Question

자바 스크립트에서 배열을 통해 루프 할 때 각 항목 이후 3 초 동안 일시 중지됩니다. 이 작업은 성공적으로 수행되지만 배열이 완료 될 때까지 웹 페이지가 정지됩니다.

function launchTutorial() { 
     HideFloatingMenu(); //freezes on page and it doesn't when i comment out the subsequent array loop 
    //highlightElement("diLeftColumn"); 

//the classes of each element to highlight in the tutorial 

    var tutorialClasses = [ 
     "diLeftColumn", 
     "diMiddleColumn", 
     "diRightColumn" 
    ]; 

    var threeSec = new Date().getTime() + 3000; 
    for (var i = 0; i < tutorialClasses.length; i++) { 
     //$.each(tutorialClasses, function (key, value) { 

     if (i != 0) { 
      var now = new Date().getTime(); 
      if (now >= threeSec) { 
       highlightElement(tutorialClasses[i]); 
       threeSec = new Date().getTime() + 3000; 
      } 
      else { 
       i = i - 1; //go back to this item if it hasn't been 3 seconds 
      } 
     } 
     else { 
      highlightElement(tutorialClasses[i]); 
      threeSec = new Date().getTime() + 3000; 
     } 
    } 
} 

내가에서는 setTimeout(), setInterval을 (0, 지연(), 2 개 개의 다른 사용자 정의 절전 기능 및 while 루프를 시도했다. 그들 중 누구도 일했다.

Answer 1

에게 사용이. 자바 스크립트에서, 때를 while 루프를 사용하면 시간 x가 걸리며, 전체 페이지는 그 시간 동안 멈추게됩니다. 따라서 while 루프를 사용하는 것은 옵션이 아닙니다. 그러나 setTimeout 함수를 사용하면 10 초마다 printNextElement 함수가 실행됩니다 (예제에서)

console.log 위치에서 논리를 수행하고 시간을 10000으로 변경하십시오.

,

const ar = ['Hello', 'World']; 
 
let index = 0; 
 

 
const printNextElement =() => { 
 
    console.log(ar[index]); 
 
    index += 1; 
 
    
 
    if(ar.length === index) { 
 
    return; 
 
    } 
 
    
 
    window.setTimeout(printNextElement, 10000); 
 
}; 
 
    
 
printNextElement();