Страница зависает, когда 3-секундная пауза находится внутри цикла

Когда я перебираю массив в javascript, он приостанавливается на 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, delay(), 2 разные пользовательские функции сна и цикл while. Ни одна из них не сработала.


javascript arrays freeze jquery pause
person Rainhider    schedule 03.11.2017    source источник
comment
что-то что-то event loop что-то что-то, хорошо, теперь с этим покончено, вы блокируете свое выполнение, потому что все, что вы делаете, синхронно, я хотел бы увидеть вашу реализацию setTimeout(), потому что это был бы правильный путь о том, чтобы сделать эту задержку (хотя это будет не идеально, JSYK, но, вероятно, достаточно хорошо!)   -  person Cody Ｇ    schedule 04.11.2017
comment
Он просто возвращает functionGenerator = undefined, когда я прохожу через него.   -  person Rainhider    schedule 06.11.2017

Ответы (1)


arrow_upward
0
arrow_downward

Использовать это. В javascript, когда вы выполняете цикл while, который занимает время x, вся страница зависает на это время x. Поэтому использование цикла while не вариант. Но вы можете использовать функцию setTimeout следующим образом. Это будет запускать функцию printNextElement каждые 10 секунд (в моем примере).

В месте 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();

person Daniel    schedule 03.11.2017
comment
Огромное спасибо! Работает как сон и не зависает страница!! - person Rainhider; 06.11.2017