javascript - JavaScript 使用延迟动态更改内容

Question

我有一组要传递给 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();
    }
    }   

标签： javascriptajaxasynchronous

Answer 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();

<div id="TeamDisplay"></div>