Estoy introduciendo una cadena JSON codificada en PHP, y estoy teniendo dificultades para que el Javascript funcione como lo necesito. Déjame explicarte un poco lo que estoy tratando de hacer. Tengo una imagen que intento cambiar cada 20 segundos junto con el texto que la acompaña. Tengo un problema para que la parte de bucle funcione en mi código javascript.

Aquí está mi 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));
    }

Las salidas del código anterior:

{  
   "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"
   ]
}

Mi código 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);
            });
});

Mi problema está en la declaración ForEach en mi javascript. Cuando lo ejecuto, muestra lo siguiente en la Terminal de Chrome:

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

Necesito que se ejecute y solo genere un valor cada 20 segundos, no todos a la vez. Cualquier ayuda sería apreciada.

0
Michael Grigsby 14 ene. 2017 a las 06:28

3 respuestas

La mejor respuesta

setTimeout no es una llamada de bloqueo. El bucle continuará iterando sobre la colección. Todas las devoluciones de llamada se dispararán dentro de un pequeño período de tiempo entre sí en lugar de durante un intervalo. Utilice setIntveral en su lugar:

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);
2
Max Sindwani 14 ene. 2017 a las 03:57

¿Qué tal esta solución? ¡Espero eso ayude!

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>
1
HenryDev 14 ene. 2017 a las 04:20

Aquí hay un código Javascript de muestra para mostrar un nombre de imagen cada segundo

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

var counter = 0;

window.setInterval( function() {
    console.log( arr[ counter++ % arr.length ] );
}, 1000 );
1
Jinsong Li 14 ene. 2017 a las 03:47