Tengo el siguiente problema, al aumentar el tiempo de setInterval.
Explico de que se trata, tengo dos texto una del lado derecho y el otro del lado izquierdo. En el de el lado derecho tengo una palabra la cual busco en un grupo de palabras que tengo en el lado izquierdo y la cambio de color. Lo que me esta sucediendo que a un intervalo de 1000 ms, me trabaja sin problema pero cuando lo reduzco a 500ms ya no me realiza el efecto del cambio de color de la palabra en el texto del lado izquierdo. Les dejo el código de javascript para ver si me pueden ayudar.
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>
Nota: el valor esta fijado a 60 palabras por minuto y en la función get_palmin es donde se fija el valor del setInterval
xa
,setinterval
no lo utilizar, realmente no se como ayudarte