Question

我正在使用PHP编码的JSON字符串，我很难让Javascript工作，我需要它。让我解释一下我想要做的事情。我有一个图像，我试图每20秒改变一次伴随文字。我在使用我的javascript代码中使用循环部分时遇到了问题。

这是我的PHP：

public function pull_projects() {
        $sql = $this->db->query("SELECT * FROM project_table LIMIT 4");
        $project_title_array = array();
        $project_sub_title_array = array();
        $project_description_array = array();
        $project_picture_url_array = array();
        foreach($sql->result() as $row) {
            array_push($project_title_array,$row->project_title);
            array_push($project_sub_title_array,$row->project_sub_title);
            array_push($project_description_array,$row->project_description);
            array_push($project_picture_url_array,$row->project_picture_url);
        }
        echo json_encode(array('project_title' => $project_title_array, 'project_sub_title' => $project_sub_title_array, 'project_description' => $project_description_array, 'project_picture_url' => $project_picture_url_array));
    }

以上代码输出：

{  
   "project_title":[  
      "1 STOP RADIO 85.9",
      "Official Slimm",
      "The Lab Community Foundation",
      "Official Michael Wyatt"
   ],
   "project_sub_title":[  
      "www.1stopradio859.com",
      "www.officialslimm.com",
      "www.thelabcommunityfoundation.org",
      "www.officialmichaelwyatt.com"
   ],
   "project_description":[  
      "Bon App\u00e9tit and epicurious.com joined forces to create an irresistible marketing group called FIG. We brought it to the web for our agency partners Independent Content, creating a rich and immersive online experience that delivers their powerful marketing capabilities to potential clients.",
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.",
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.",
      "Bon App\u00e9tit and epicurious.com joined forces to create an irresistible marketing group called FIG. We brought it to the web for our agency partners Independent Content, creating a rich and immersive online experience that delivers their powerful marketing capabilities to potential clients."
   ],
   "project_picture_url":[  
      "1stopradio859com.png",
      "officialslimmcom.png",
      "thelabcommunityfoundationorg.png",
      "officialmichaelwyattcom.png"
   ]
}

我的Javascript代码：

$.getJSON("Home/pull_projects", function(data) {

            // Sets global variables for returned json data
            window.$project_title = data.project_title;
            window.$project_sub_title = data.project_sub_title;
            window.$project_description = data.project_description;
            window.$project_picture_url = data.project_picture_url;

            // Turns returned json data into an array
            window.$project_picture_url_array = $.map(window.$project_picture_url, function(el) { return el; });

            window.$project_sub_title_array = $.map(window.$project_sub_title, function(el) { return el; });

            // Loops through and changes each value
            window.$project_picture_url_array.forEach(function(current_value, index, initial_array) {
                setTimeout(function() {
                    console.log(current_value);
                    $('.website_slider > .slider').attr('src','assets/'+current_value);
                }, 5000);
            });
});

我的问题出在我的javascript中的ForEach语句中。当我运行它时，它会在Chrome终端输出以下内容：

1stopradio859com.png
officialslimmcom.png
thelabcommunityfoundationorg.png
officialmichaelwyattcom.png

我需要它来运行，并且每20秒只输出一个值，而不是一次输出。任何帮助将不胜感激。

Answer 1

setTimeout不是阻止通话。循环将继续迭代集合。所有回调都会在彼此之间的少量时间内触发，而不是在一段时间内触发。请改用setIntveral：

＆＃13;

var myArray = ['a', 'b', 'c', 'd', 'e'];
var index = 0;
var x;

function printNextValue() {
  console.log(myArray[index]);
  index = (index + 1) % myArray.length;
}

// This will execute every second until all array elements are printed.
printNextValue();
x = setInterval(printNextValue, 1000);

＆＃13;

Answer 2

以下是一些示例Javascript代码，每秒显示一个图像名称

var arr = [
    "1stopradio859com.png",
    "officialslimmcom.png",
    "thelabcommunityfoundationorg.png",
    "officialmichaelwyattcom.png"
];

var counter = 0;

window.setInterval( function() {
    console.log( arr[ counter++ % arr.length ] );
}, 1000 );

Answer 3

这个解决方案怎么样？希望它有所帮助！

＆＃13;

var arr = ["1stopradio859com.png" , "officialslimmcom.png", "thelabcommunityfoundationorg.png", "officialmichaelwyattcom.png"];

        $("#test").html(arr[0]).fadeTo(100, 0.1).fadeTo(200, 1.0);

            var str = "";
            var counter = 1;
            var timer = setInterval(function() {
                if(counter == 0){str = arr[counter]}
                if(counter == 1){str = arr[counter]}
                else if(counter == 2){str = arr[counter]}
                else if(counter == 3){str = arr[counter]}
                $("#test").html("<div>"+ str+"</div>").fadeTo(100, 0.1).fadeTo(200, 1.0);
                ++counter;
                if(counter == 4){
                    counter = 0;
                }
            }, 2000);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id = "test">
</div>

＆＃13;

循环遍历数组并使用每个数组值更改html元素

3 个答案: