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 () {