2

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

10
  • 1
    ¿Cuál es tu código HTML disculpa? Para poder hacer pruebas en JSFiddle por favor
    – Yikarus
    Commented el 20 abr. 2017 a las 23:29
  • Ya coloque el texto html, el contenido del div es dinámico pues colocar cualquiera. Del lado derecho una palabra y del izquierdo un grupo, si tiene que estar contenido aunque sea una vez la palabra. Commented el 20 abr. 2017 a las 23:34
  • no esta definido xa , setinterval no lo utilizar, realmente no se como ayudarte
    – fwBasic
    Commented el 21 abr. 2017 a las 0:38
  • Acabo de actualizar mi pregunta coloque todos los valores que intervienen agradezco cualquier ayuda. Commented el 21 abr. 2017 a las 1:29
  • también sugiero una prueba con JSFiddle, porque no comprendo completamente el problema.
    – bypabloc_
    Commented el 21 abr. 2017 a las 2:17

1 respuesta 1

0

Aquí les dejo la solución que encontré. Espero que le sea de utilidad a alguien mas. Básicamente lo que hice, fue calcular un % de del tiempo que refrescaba la función set_buspal() y se valor fijarlo en el método setTimeout ya de esta manera no me refresca la función antes de que yo cambie de color las palabras.
Gracias a todos por su ayuda.

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 * 8) / 100;
		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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.