JavaScript 使用延迟动态更改内容答案

【问题标题】：JavaScript changing content dynamically using a delayJavaScript 使用延迟动态更改内容
【发布时间】：2021-03-16 22:15:25
【问题描述】：

我有一组要传递给 JavaScript 函数的值。我希望函数循环遍历数组并每 15 秒更新一个 div 以显示新值。我已经写了下面的代码。不幸的是，在脚本完成之前，DOM 被冻结了。我正在尝试创建 sudo 幻灯片放映效果。有没有我可以使用的异步等待函数。

window.addEventListener("load", function(){
    runDisplay();
});
    
function runDisplay() {

var rotations = 2;  
var teams = '1,4,2,3';

var res = teams.split(",");
var arrayLength = res.length;
var r = 0;  
//Do until max rotations
do {
    

//loop through team array
    for (var i = 0; i < arrayLength; i++) {
    //update team display 
    document.getElementById("TeamDisplay").innerHTML=res[i];
    wait(7000); 
    }
    //increment rotations
    r = r + 1;
    } while (r <= rotations);   
    
    //refresh page after rotations are complete
    
    }
    
    function wait(ms){
    var start = new Date().getTime();
    var end = start;
    while(end < start + ms) {
    end = new Date().getTime();
    }
    }

【问题讨论】：

不要使用这样的“忙等待”——它会阻止其他任何事情的发生！查找setTimeout 和setInterval。
如何在 runDisplay 函数的 for 循环中使用 setInterval()？

标签： javascript ajax asynchronous

【解决方案1】：

您需要使用 setInterval 或 setTimout 函数。

这里是一个 setTimeout 的例子

var rotations = 2;  
var teams = '1,4,2,3';

var res = teams.split(",");
var arrayLength = res.length;
var r = 0;  
var i = 0;

function loop() {
    if(r < rotations){
        
        if (i < arrayLength) {
            document.getElementById("TeamDisplay").innerHTML=res[i];
            setTimeout(loop, 7000);  
            i++;
        }
        
        else {
          r++;
          i = 0;
          loop();
        }
    }
}

loop();

&lt;div id="TeamDisplay"&gt;&lt;/div&gt;

【讨论】：