配列をループし、各配列値でhtml要素を変更する

Question

PHPでエンコードされたJSON文字列を取得しています.Javascriptを使用して必要な作業をするのに苦労しています。私が何をしようとしているのか少し説明しましょう。私はテキストを伴う20秒ごとに変更しようとしているイメージがあります。私はループ部分がJavaScriptコードで動作することに問題があります。

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文である

は、ここに私のPHPです。私はそれを実行すると、それはクロム、ターミナルで次のように出力します

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

私はそれがないすべてを一度に20秒ごとに一つの値を実行し、出力のみにする必要があります。どんな助けもありがとう。

Answer 1

setTimeoutはブロックコールではありません。ループはコレクションを繰り返し処理します。すべてのコールバックは、一定時間内ではなく、少し時間内に発生します。代わりにsetIntveralを使用してください：ここでは

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

Answer 2

は、いくつかのサンプルのJavaScriptコードは、1人の画像名にこのソリューションについてどのように毎秒

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

を示すことです。それが役に立てば幸い！

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

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