setInterval text javascript

Question

我想在进入网页时立即显示text和image。现在我的图像会立即出现，但当我打开网页时，文本会在 2 秒后出现。这是我的代码：

<script>
var myIndex = 0;
carousel();
function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
var text = ["<?php
    $conn = new mysqli($dbHost, $dbUser, $dbPass, $dbName);
    $sql2 = "SELECT * FROM product";
    $result2 = $conn->query($sql2);
    while($row = $result2->fetch_assoc()) {
        $code3 = $row["mtitle"];
        echo $code3.'","';
    }
?>"];
var counter = 0;
var elem = document.getElementById("changeText");

function change() {
  elem.innerHTML = text[counter];
  counter++;
  if (counter >= text.length) {
    counter = 0;
  }
}
change(); setInterval(change, 2000);
</script>

Answer 1

在您最近更新问题中的代码之后，情况应该已经有所改善。

但是，您确实应该将两个间隔合并在一起，因为您希望同时发生两个操作（图像和文本），而不会有它们不同步的风险。

其次，定义text数组的方式不是最佳做法。想象一下，如果您的文本之一包含双引号，事情会如何出错......请改用 JSON。

最后，使用能够更好地指示其内容的变量名称。x 表示 x 坐标，而不是 DOM 元素列表。把它命名为slides什么的。数组的复数形式也给出了一个线索：text不是代码中的一个文本，而是一个文本数组，所以用复数形式称它为texts。所有这些都有助于使您的代码更具可读性。

// Use JSON notation instead of fabricating the array with concatenations
var texts = <?php
    $conn = new mysqli($dbHost, $dbUser, $dbPass, $dbName);
    $sql2 = "SELECT * FROM product";
    $result2 = $conn->query($sql2);
    while($row = $result2->fetch_assoc()) {
        $data = $row["mtitle"]; // Push to an array
    }
    echo json_encode($data); // Encode the array as JSON text: ["abc", "def", ...]
?>;
var slides = document.getElementsByClassName("slides");
(function carousel(slideIndex, textIndex) {
    var i;
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slides[slideIndex].style.display = "block";
    // The variable changeText is automatically defined upon page load, so use it  
    changeText.textContent = texts[textIndex]; 
    // Change image and text every 2 seconds
    setTimeout(carousel.bind(null, (slideIndex + 1) % slides.length, 
                                   (textIndex + 1) % texts.length)), 2000);
})(0, 0); // Execute on page load, keeping the counters as local variables