頁面在循環中停留3秒時凍結

當我在javascript中循環訪問數組時，我在每個項目後暫停3秒。它成功地完成了這項工作，但它凍結了網頁，直到數組完成。頁面在循環中停留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循環，沒有一次成功。

來源

2017-11-03 Rainhider

什麼東西'事件loop'什麼東西，好嗎所以現在有，因爲你做的一切是同步的，你擋住你的執行已經結束了，我想看看你的setTimeout （）實現，因爲這將是正確的方式去做這個「延遲」（雖然它不會是完美的，JSYK，但可能夠好！） –

它只是返回「functionGenerator = undefined」當我通過它。 – Rainhider

使用此。在JavaScript中，當你做一個需要時間x的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();

來源

2017-11-03 23:30:54 Daniel

非常感謝你！像夢一樣運行，不會凍結頁面！ – Rainhider

頁面在循環中停留3秒時凍結

回答

相關問題