dybanically change/insert/update div text using for loop and javascript in variable time steps

Question

I would like to insert text pieces with variable timeout using for loop.

I mean i would like that text would change in the background with given pace and animation.

I have corrected the question. The short version works, but the longer - not. Do not understand why?

//working version adapted from JavaScript : For loop with timeout

$(document).ready(function () {


 // working    
    for (var i=0;i<=10;i++) {
        (function(ind) {
            setTimeout(function(){ 
                console.log(ind); 
                txtEl = $('#mainImgTxt'); //logs correctly with timeout
                txtEl.text(ind); //works correctly with timeout
            }, 1000 + (1100 * ind));
        })(i);
    }

});

Not working - logs after 5 seconds everything : a, b and c, and in div displays c. It should display each 5 seconds a, b and then c.

  console.log('txt.js');

  var presSlides = [
    { txtItem: [ 'a<br>a<br>'], txtEff: [{}], pictItem: [''], pictEff: [{}], sec : 5000 } ,
    { txtItem: [ 'b<br>b<br>'], txtEff: [{}], pictItem: [''], pictEff: [{}], sec : 5000 } ,
    { txtItem: [ 'c<br>c<br>'], txtEff: [{}], pictItem: [''], pictEff: [{}], sec : 5000 } 
  ];


  for (let slide of presSlides) {
      //var dur = slide.sec ;
( function( dur, slide ) {
//var dur = dur; 
//console.log( '********************************** anon fnc dur ='+dur ); 
setTimeout( function(slide) {
    console.log( '********************************** slide' ); 
    console.log(slide); // slide =  { txtItem: { txt: 'a<br>a<br>', txtEff: '', pict: '', pictEff: '' } }
    //default values
    //var txtDur = 5000;  

    var txtItemArr = slide.txtItem;
    var txtItemArrLen = txtItemArr.length;

    var txtItemEff = slide.txtEff;
    var txtItemEffLen = Object.keys(txtItemEff).length;

    var pictItemArr = slide.pictItem;
    var pictItemArrLen = pictItemArr.length;

    var pictItemEff = slide.pictEff;
    var pictItemEffLen = Object.keys(pictItemEff).length;


    var pictEff = pictItemEff[0];
    var txtEff = txtItemEff[0];
    console.log('pictEff'); console.log(pictEff);
    console.log('txtEff'); console.log(txtEff);
    console.log('ttxtItemEffLen='); console.log(txtItemEffLen);


    if (txtItemEffLen > 1) {
      var cnt = 0;
      for (let txtItem of txtItemArr) {
        if (txtItemEffLen > 1) { var txtEff = txtItemEff[cnt]; }
        if (pictItemEffLen > 1) { var pictEff = pictItemEff[cnt]; }
        if (txtEff.sec !== null && txtEff.sec !== undefined) {
          txtDur = txtEff.sec;
        }
        // timedDisp(txtDur, txtItem, txtEff, pictEff); //contains timeout
        txtDisp( txtItem, txtEff, pictEff);
      }
    } // if( txtItemEffLen>1 ) {
    else {
      if (slide.sec !== null && slide.sec !== undefined) {
        txtDur = slide.sec;
      }
      //timedDisp(txtDur, txtItemArr[0], txtEff, pictEff); //contains timeout
      txtDisp(txtItemArr[0], txtEff, pictEff);
    }

}, dur, slide ); //setTimeout(function(slide){
})( slide.sec, slide );  
} // for ( let slide of presSlides ) {


  //timedDisp( txtDur, txtItemArr[0], txtEff, pictEff ); 
  function txtDisp( txtItem, txtEff, pictEff) {
    console.log('timedDisp, txtDur=' + txtDur);
    console.log('timedDisp, txtItem='); console.log(txtItem); //logs correct
    //elId you already have 
    var txtItem = txtItem;
    var txtEff = txtEff;
    var pictEff = pictEff;

      //elId is availbale here 
      //timing is available here 
      console.log('timedDisp, setTimeout, txtDur=' + txtDur);
      txtEl = $('#mainImgTxt');
      console.log('txtEl='); console.log(txtEl);
      txtEl.removeClass();
      // removeClass("blue"); //If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed.

      //add text 
      console.log('timedDisp, setTimeout, txtItem='); console.log(txtItem);
      txtEl.text(txtItem);


  } //  function txtDisp( txtItem, txtEff, pictEff) {


  //timedDisp( txtDur, txtItemArr[0], txtEff, pictEff ); 
  function timedDisp(txtDur, txtItem, txtEff, pictEff) {
    console.log('timedDisp, txtDur=' + txtDur);
    console.log('timedDisp, txtItem='); console.log(txtItem); //logs correct
    //elId you already have 
    var txtItem = txtItem;
    var txtEff = txtEff;
    var pictEff = pictEff;
    setTimeout(function (txtItem, txtEff, pictEff) {
      //elId is availbale here 
      //timing is available here 
      console.log('timedDisp, setTimeout, txtDur=' + txtDur);
      txtEl = $('#mainImgTxt');
      console.log('txtEl='); console.log(txtEl);
      txtEl.removeClass();
      // removeClass("blue"); //If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed.


      console.log('timedDisp, setTimeout, txtItem='); console.log(txtItem);
      txtEl.text(txtItem);
    }, txtDur, txtItem, txtEff, pictEff);
  } //  function timedDisp(txtDur, txtItem, txtEff, pictEff) {

}); // $(document).ready(function () {$(document).ready(function () {

There is a typo in `var pictItemArr = slide.pictitem;`, I wonder if it is the same in your system (slide.pictitem >> slide.pict). — Aydin4ik, Aug 02 '17 at 06:22
You're treating object as if they were arrays. For instance, `txtItemArr.length` : `txtItemArr` is not an array, it's an object, it has no length. `for (let txtItem of txtItemArr)` this would work if `txtItemArr` was an array. When you call `timedDisp(txtDur, txt, txtEff, pictEff)`, in here `txt` is undefined. This code contains so many errors at so many levels, you should first try and fix them. — Jeremy Thille, Aug 02 '17 at 06:24
I reckon what is pasted here is not the same code as in the production, hence so many errors. This code would not display the text even for 1 second :) Seeing the actual code would help. — Aydin4ik, Aug 02 '17 at 06:28
thanks, it is true. The real slides object is so large that i did not paste it. Seems i abbreviated with mistakes. It is an arraz, etc, i can log the text to console, but it is not displazed. GIve me 10min to fix the question errors. — olga, Aug 02 '17 at 06:34
Reading the code carefully, I think I know what the problem is. Your 'for' loop is not waiting for the setTimeout to finish what it is doing, before it fires the next loop. That is, for loop jumps into the queue immediately and overrides the setTimeout interval, which is waiting for 5 seconds to pass. Instead of the 'for' loop, you will need to loop again using the setTimeout itself, perhaps recursively. Or use setInterval, which is the best solution in these situations. — Aydin4ik, Aug 02 '17 at 06:39
after fixing errors demo start working :) Thus most probably real has some error i did not notice — olga, Aug 02 '17 at 06:41

dybanically change/insert/update div text using for loop and javascript in variable time steps

0 Answers0