循环内停顿 3 秒时页面冻结

Question

当我循环遍历 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 循环。none 其中有效。

Answer 1

用这个。在 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();

循环内停顿 3 秒时页面冻结

Page freezes when 3 second pause is inside a loop

javascript

arrays

jquery

freeze

pause