Question

我尝试遍历数组，每3秒更改DOM中某些项的innerHTML。该代码目前从0（混合媒体艺术家）直接变为2（描述符），根本不显示1（艺术教育者）。并且console.log为每个setinterval循环输出0 1 2。

任何人都可以看到我在做错什么才能使其正常工作吗？

var heroItems = ['galleries', 'workshops', 'exhibitions'];
var heroBtns = ['view', 'sign UP', 'VIEW'];
var heroURLs = ['#', '#', '#'];
var descriptions = ['mixed media artist', 'art educator', 'descriptor'];

setInterval(function() {
    for (var i = 0; i < descriptions.length; i++){
      console.log(i)
      changeDescription(i);
    }
}, 3000);


function changeDescription(i) {
    var descriptor = document.getElementById('descriptor').innerHTML = descriptions[i];
    var hero = document.getElementById('hero').innerHTML = heroItems[i];
    var heroRef = document.getElementById('heroref').setAttribute('href', heroURLs[i]);
    var heroBtn = document.getElementById('herobtn').innerHTML = heroBtns[i];
}

Answer 1

问题是，您不必在每次循环迭代后都等待。更改说明3次后，您只需等待一次。

就您而言，您也可以完全跳过循环。

var i = 0;
var timer = window.setInterval(function() {
    changeDescription(i);
    if (++i == descriptions.length) {
        window.clearInterval(timer);
    }
}, 3000);

在setInterval函数中传递计数变量

1 个答案: