I have the following problem, by increasing the time of setInterval .
I explain what it is about, I have two texts, one on the right side and the other on the left side. In the one on the right side I have a word which I look for in a group of words that I have on the left side and I change its color. What is happening to me is that at an interval of 1000 ms , it works without problem, but when I reduce it to 500 ms , the effect of changing the color of the word in the text on the left side no longer occurs. I leave the javascript code to see if you can help me.
var xa = "primario|comida, nopal, tahúr, cartílago, foto, expulsión, primario, siglo, yerba, grasa, tesis, minuto~zacate|vegetal, zacate, sabor, veneno, horario, sexual, anacoreta, aceptar, inventar, zacate, protesta, arrojar~rito|frustración, rito, ensalzar, filósofo, léxico, rito, avalar, luz, esquimal, rito, ministro~cabra|tauro, palo, cabra, indigno, bienvenida, sopa, insípido, hablar, causa, farol, armazón, consejo~urbe|anfitrión, rival, domar, olivo, mano, urbe, desenfoque, acento, pastel, maduro, cordones, urbe~milenio|milenio, mejor, hortaliza, norteño, jade, milenio, pequeño, garbo, plata, naturales, milenio, yogur~hostal|invierno, hostal, mamut, sonrisa, niño, futbolista, noria, divisiones, servicio, consomé, bigotes, hundir";
var tipo = '';
var interval = '';
var npal = 0;
var tpal = '';
get_palmin(60, set_buspal);
function set_buspal(){
var a = xa.split("~");
len = a.length;
tprt = tpal - 1000;
var i = Math.floor((Math.random() * len) + 1);
$("#text1").addClass('txt-mitad2');
$("#text2").addClass('txt-mitad2');
//Separamos las parte del segundo array.
if((npal + 1) == len){
$("#text1").show('fast',function(){
a2 = a[npal].split("|");
$(this).html(a2[0]);
$("#text2").html("");
setTimeout(function(){
wd = a2[1];
$("#text2").html(wd);
setTimeout(function(){
if(tipo == 21){
var search = a2[2].trim();
}else{
var search = a2[0].trim();
}
$("#text2:contains('"+search+"')").each(function () {
var regex = new RegExp(search,'gi');
$(this).html($(this).text().replace(regex, '<span style="color: #00ff00">'+search+'</span>'));
});
npal = 0;
},tprt);
},tprt);
});
}else{
$("#text1").show('fast',function(){
a2 = a[npal].split("|");
$(this).html(a2[0]);
$("#text2").html("");
setTimeout(function(){
wd = a2[1];
$("#text2").html(wd);
setTimeout(function(){
if(tipo == 21){
var search = a2[2].trim();
}else{
var search = a2[0].trim();
}
$("#text2:contains('"+search+"')").each(function () {
var regex = new RegExp(search,'gi');
$(this).html($(this).text().replace(regex, '<span style="color: #00ff00">'+search+'</span>'));
});
npal++;
},tprt);
},tprt);
});
}
}
function get_palmin(val = '', fn = '', wd = true) {
if (wd != '' && (tipo == 19 || tipo == 21)) {
if (wd) {
n_wd = 10;
} else {
n_wd = wd.split(" ").length;
}
pal = (60 / val) * n_wd;
tpal = pal * 1000;
} else {
pal = 60 / val;
tpal = pal * 1000;
}
clearInterval(interval);
interval = setInterval(fn, tpal);
}
$("#rango").change(function() {
var val = $(this).val();
get_palmin(val, set_buspal);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="row show-grid" style="margin-top: 50px;">
<div class="span2" id="text1" style="color: #0000ff; height:40px; " align="right"></div>
<div class="span7" id="text2" align="left"></div>
</div>
<div style="margin-top: 50px;">
<div><input type="range" name="rango" class="input-xxlarge" id="rango" step="1" min="1" max="2000" value="60"></div>
</div>Note: the value is set to 60 wpm and the get_palmin function is where the setInterval value is set
Here is the solution I found. I hope it is useful to someone else. Basically, what I did was calculate a % of the time that the set_buspal() function refreshed and set it in the setTimeout method , in this way the function does not refresh before I change the color of the words.
Thanks everyone for your help.