时间戳

首页 > 解决方案 > 在 setInterval 函数中传递计数变量

javascript - 在 setInterval 函数中传递计数变量

问题描述

我正在尝试遍历数组，每 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];
}

标签： javascriptarrayssetinterval

解决方案

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

在您的情况下，您也可以完全跳过循环。

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

推荐阅读