Foros del Web » Programando para Internet » Javascript »

Problema con timing (entre otros)

 Estas en el tema de Problema con timing (entre otros) en el foro de Javascript en Foros del Web. Hola gente, sigo con problemas con 'mi librería'. Hasta ahora me funcionaba bien, pero he realizado cambios en una función para que ocupe menos (y ...
  #1 (permalink)  
Antiguo 08/02/2011, 16:03
Avatar de _cronos2
Colaborador
  
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 5 meses
Puntos: 310
Problema con timing (entre otros)
Hola gente, sigo con problemas con 'mi librería'. Hasta ahora me funcionaba bien, pero he realizado cambios en una función para que ocupe menos (y sea más legible y preciso) y... ya no funciona. Primero pongo el código y luego el problema:
Código Javascript: 
Ver original
  1. // ...
  2.   getStyle : function(style){
  3.    var computedStyle;
  4.    if (typeof this.currentStyle != 'undefined') 
  5.     computedStyle = this.currentStyle; 
  6.    else
  7.     computedStyle = document.defaultView.getComputedStyle(this, null);
  8.   return computedStyle[style];
  9.   },
  10.  opacity : function(){
  11.    var isIE = document.all, estilos = isIE ? ['filter', 100] : ['opacity', 1], valor = isIE ? ['alpha(opacity=', ')'] : ['', ''];
  12.    if(arguments.length)
  13.     this.style[estilos[0]] = valor[0] + (arguments[0] * estilos[1]) + valor[1];
  14.    else
  15.     return P(this).getStyle('opacity');
  16.    return 1;
  17.   },
  18.   entrada : function(t){
  19.    var tempo = { 'lento' : 800, 'medio' : 500, 'rapido' : 200};
  20.    var tiempo = isFinite(t)?t:tempo[t], thix = P(this), incr = 20/tiempo;
  21.    thix.opacity(0);
  22.    var timer = setInterval(function(){
  23.     if(thix.opacity()>=1) timer = clearInterval(timer);
  24.     else{
  25.      thix.opacity(thix.opacity()+incr);
  26.     }
  27.    }, 20);
  28.    return P(this);
  29.   },
  30.   salida : function(t){
  31.    var tempo = { 'lento' : 800, 'medio' : 500, 'rapido' : 200};
  32.    var tiempo = isFinite(t)?t:tempo[t], thix = P(this), incr = 20/tiempo;
  33.    thix.opacity(1);
  34.    var timer = setInterval(function(){
  35.     if(thix.opacity()<=0) timer = clearInterval(timer);
  36.     else{
  37.      thix.opacity(thix.opacity()-incr);
  38.     }
  39.    }, 20);
  40.    return P(this);
  41.   },
  42. // ...
Hasta ahora, la función opacity era así:
Código Javascript: 
Ver original
  1. opacity : function(){
  2.    var isIE = document.all, estilos = isIE ? ['filter', 100] : ['opacity', 1], valor = isIE ? ['alpha(opacity=', ')'] : ['', ''];
  3.    if(arguments.length){
  4.     this.style[estilos[0]] = valor[0] + (arguments[0] * estilos[1]) + valor[1];
  5.    }else{
  6.     if(this.style[estilos[0]]){
  7.      return this.style[estilos[0]].match(/\d+(\.\d+)?/)[0]/estilos[1];
  8.     }else{
  9.      if(SS.find(this.tagName, estilos[0])){
  10.       return SS.find(this.tagName, estilos[0]).match(/\d+(\.\d+)?/)[0]/estilos[1];
  11.      }else{
  12.       if(SS.find('#'+this.id, estilos[0]))
  13.        return SS.find('#'+this.id, estilos[0]).match(/\d+(\.\d+)?/)[0]/estilos[1];
  14.       else{
  15.        for(var i=0, partir=this.className.split(' '); clase=partir[i]; i++){
  16.         if(SS.find('.'+clase, estilos[0]))
  17.          return SS.find('.'+clase, estilos[0]).match(/\d+(\.\d+)?/)[0]/estilos[1];
  18.        }
  19.       }
  20.      }
  21.     }
  22.     return 1;
  23.    }
  24.   },
Problemas:
En Chrome tengo un problema con el timing, porque la primera vez se ejecuta bien, pero a partir de ahí va cada vez más rápido; y además la función entrada no funciona (se queda con opacity:0 . Sólo funciona salida()). En IE directamente no funcionan ni una ni otra. ¿Qué está pasando? ¿Tanto me cambia el código la función nueva?
Saludos y gracias :D
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
Última edición por _cronos2; 09/02/2011 a las 12:39
  #2 (permalink)  
Antiguo 09/02/2011, 14:09
Avatar de masterpuppet
Software Craftsman
  
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 10 meses
Puntos: 845
Respuesta: Problema con timing (entre otros)
Que tal _cronos2, habría que ver el resto del código para hacer algunas pruebas, a golpe de ojo no veo nada.

Saludos.
__________________
http://es.phptherightway.com/
thats us riders :)
  #3 (permalink)  
Antiguo 09/02/2011, 14:28
Avatar de _cronos2
Colaborador
  
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 5 meses
Puntos: 310
Respuesta: Problema con timing (entre otros)
Este es el código entero:
Código Javascript: 
Ver original
  1. function addEvent(tipo, toDo, obj){
  2.  if(obj.attachEvent){
  3.   var thix = obj, fn = function(){ toDo.call(thix, window.event); };
  4.   obj.attachEvent('on'+tipo, fn);
  5.   this[toDo.toString()+tipo]=fn;
  6.  }else{
  7.   if(obj.addEventListener)
  8.    obj.addEventListener(tipo, toDo, false);
  9.   else
  10.    obj['on'+tipo]=toDo;
  11.  }
  12. }
  13. var JSPlus = (function(){
  14.  var privado = {
  15.   evento : function(tipo, toDo){
  16.    return addEvent(tipo, toDo, this);
  17.   },
  18.   quitaEvento : function(tipo, fn){
  19.    if(this.detachEvent)
  20.     this.detachEvent('on'+tipo, this[fn.toString()+tipo]);
  21.    else{
  22.     if(this.removeEventListener)
  23.      this.removeEventListener(tipo, fn, false);
  24.     else
  25.      this['on'+tipo]=null;
  26.    }
  27.    return P(this);
  28.   },
  29.   getStyle : function(style){
  30.    var computedStyle;
  31.    if (typeof this.currentStyle != 'undefined') 
  32.     computedStyle = this.currentStyle; 
  33.    else
  34.     computedStyle = document.defaultView.getComputedStyle(this, null);
  35.   return computedStyle[style];
  36.   },
  37.   atrb : function(att){ return this.getAttribute(att); },
  38.   set : function(att, valor){ this.setAttribute(att,valor); return P(this); },
  39.   css : function(estilo, valor){ 
  40.    var propi = !(/-/.test(estilo)) ? estilo : (function(s){var str=s.split('-');
  41.     for(i=0;i<str.length;i++){
  42.      str[i]=str[i].charAt(0).toUpperCase()+str[i].substr(1);
  43.     }
  44.     return str.join('');
  45.    })(estilo);
  46.    this.style[propi] = valor;
  47.    return P(this);
  48.   },
  49.   opacity : function(){
  50.    var isIE = document.all, estilos = isIE ? ['filter', 100] : ['opacity', 1], valor = isIE ? ['alpha(opacity=', ')'] : ['', ''];
  51.    if(arguments.length)
  52.     this.style[estilos[0]] = valor[0] + (arguments[0] * estilos[1]) + valor[1];
  53.    else
  54.     return P(this).getStyle('opacity');
  55.    return 1;
  56.   },
  57.   entrada : function(t){
  58.    var tempo = { 'lento' : 800, 'medio' : 500, 'rapido' : 200};
  59.    var tiempo = isFinite(t)?t:tempo[t], thix = P(this), incr = 20/tiempo;
  60.    thix.opacity(0);
  61.    var timer = setInterval(function(){
  62.     if(thix.opacity()>=1) timer = clearInterval(timer);
  63.     else{
  64.      thix.opacity(thix.opacity()+incr);
  65.     }
  66.    }, 20);
  67.    return P(this);
  68.   },
  69.   salida : function(t){
  70.    var tempo = { 'lento' : 800, 'medio' : 500, 'rapido' : 200};
  71.    var tiempo = isFinite(t)?t:tempo[t], thix = P(this), incr = 20/tiempo;
  72.    thix.opacity(1);
  73.    var timer = setInterval(function(){
  74.     if(thix.opacity()<=0) timer = clearInterval(timer);
  75.     else{
  76.      thix.opacity(thix.opacity()-incr);
  77.     }
  78.    }, 20);
  79.    return P(this);
  80.   },
  81.   hover : function(toDo){
  82.    addEvent('mouseover', toDo, this);
  83.    return P(this);
  84.   },
  85.   out : function(toDo){
  86.    addEvent('mouseout', toDo, this);
  87.    return P(this);
  88.   },
  89.   nodo : function(elem){ this.appendChild(elem); return P(this); },
  90.   extendido : true
  91.  };
  92.  return {
  93.   extender : function(elem, obj){
  94.    if(elem.extendido && elem != privado) return elem;
  95.    for(var i in obj){
  96.      elem[i] = obj[i];
  97.    }
  98.    return elem;
  99.   },
  100.   get : function(obj){
  101.    switch(typeof obj){
  102.     case 'object':
  103.      return JSPlus.extender(obj, privado);
  104.     break;
  105.     case 'string': 
  106.      return JSPlus.extender(document.querySelector(obj), privado);
  107.     break;
  108.    }
  109.    return null;
  110.   },
  111.   metodos : function(obj){
  112.    JSPlus.extender(privado, obj);
  113.   }
  114.  };
  115. })();
  116. var P = JSPlus.get;
Saludos y gracias ;D
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #4 (permalink)  
Antiguo 09/02/2011, 18:19
Avatar de masterpuppet
Software Craftsman
  
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 10 meses
Puntos: 845
Respuesta: Problema con timing (entre otros)
El problema esta en getSyle, en ie no es opacity es filter y te va a devolver un string(alpha=...), la solución rapida(lo mismo aplica a salida):

Código Javascript: 
Ver original
  1. ...
  2. entrada : function(t){
  3.     var tempo  = { 'lento' : 800, 'medio' : 500, 'rapido' : 200};           
  4.     var tiempo = isFinite(t) ? t : tempo[t], thix = P(this), incr = 20 / tiempo;            
  5.     var opacity = 0;
  6.     thix.opacity(opacity);              
  7.     var timer = setInterval(function(){                             
  8.         if(opacity >= 1) {
  9.             timer = clearInterval(timer);                   
  10.         } else {                    
  11.             opacity = opacity + incr;                                   
  12.             thix.opacity(opacity);
  13.         }
  14.     }, 20);
  15.     return P(this);
  16. }
  17. ...

y deberias refactorizar algo el codigo, por ejemplo opacity:

Código Javascript: 
Ver original
  1. ...
  2. opacity : function(){           
  3.     var isIE = document.all, estilos = isIE ? ['filter', 100] : ['opacity', 1], valor = isIE ? ['alpha(opacity=', ')'] : ['', ''];
  4.     if(!arguments.length) return P(this).getStyle('opacity');                                                   
  5.     this.style[estilos[0]] = valor[0] + (arguments[0] * estilos[1]) + valor[1];             
  6.     return 1;
  7. }
  8. ...

Saludos.
__________________
http://es.phptherightway.com/
thats us riders :)
  #5 (permalink)  
Antiguo 09/02/2011, 23:10
Avatar de zerokilled
Javascripter
  
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: Problema con timing (entre otros)
Cita:
Iniciado por _cronos2 Ver Mensaje
En Chrome tengo un problema con el timing, porque la primera vez se ejecuta bien, pero a partir de ahí va cada vez más rápido; y además la función entrada no funciona (se queda con opacity:0 . Sólo funciona salida()).
buenas...

el efecto que obtienes con la funcion salida (cada vez va mas rapido) se debe a que el ciclo continua ejecutandose. o sea, nunca sale del temporizador setInterval. ¿que lo causa? al restar el valor computado con la propiedad, genera error de precision y llega un punto en que no puede restar correctamente. entonces se queda con un valor poco mayor de 0.

con la funcion entrada, el problema es que estas concatenando el valor de opacity con el nuevo valor. o sea, en realidad no estas sumando.
Código: 
     thix.opacity(thix.opacity()+incr);
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #6 (permalink)  
Antiguo 10/02/2011, 14:06
Avatar de _cronos2
Colaborador
  
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 5 meses
Puntos: 310
Respuesta: Problema con timing (entre otros)
Cita:
Iniciado por masterpuppet Ver Mensaje
El problema esta en getSyle, en ie no es opacity es filter y te va a devolver un string(alpha=...)
Pero ayer estuve probando y element.style.opacity funciona

Cita:
Iniciado por zerokilled Ver Mensaje
buenas...

el efecto que obtienes con la funcion salida (cada vez va mas rapido) se debe a que el ciclo continua ejecutandose. o sea, nunca sale del temporizador setInterval. ¿que lo causa? al restar el valor computado con la propiedad, genera error de precision y llega un punto en que no puede restar correctamente. entonces se queda con un valor poco mayor de 0.

con la funcion entrada, el problema es que estas concatenando el valor de opacity con el nuevo valor. o sea, en realidad no estas sumando.
Código: 
     thix.opacity(thix.opacity()+incr);
Ya me di cuenta de que se quedaba con opacity:0.02000... Sin embargo, en el ejemplo esta aplicando salida(1000), y 20/1000=0.02, así que en teoría podría restar otra vez, ¿no?
Por otro lado, ¿por qué no está sumando en entrada? ¿getStyle devuelve un string?
Edit: Sí, devuelve un string XD
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #7 (permalink)  
Antiguo 10/02/2011, 15:08
Avatar de zerokilled
Javascripter
  
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: Problema con timing (entre otros)
los valores en las propiedades styles, siempre se devuelven en string. en teoria podria restar de nuevo pero por alguna razon no devuelve el resultado correcto. por ejemplo, en el ultimo ciclo de salida('lento'), el elemento tiene opacidad con el valor "0.02500039152801037" y cuando se resta .025 el resultado es 3.915280103669594e-7. este valor, por alguna razon no es asignado a opacity, al menos en chrome. por cierto, la funcion entrada me funciona bien siempre y cuando conviertas el valor de opacity a numero antes de sumar.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #8 (permalink)  
Antiguo 10/02/2011, 15:31
Avatar de _cronos2
Colaborador
  
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 5 meses
Puntos: 310
Respuesta: Problema con timing (entre otros)
Odio como trata JS a los pobres números ¬¬ XD
Entonces ¿el problema en salida reside en getStyle, porque es poco preciso? ¿Y la solución sería volver a la función anterior?
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #9 (permalink)  
Antiguo 10/02/2011, 15:46
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 10 meses
Puntos: 126
Respuesta: Problema con timing (entre otros)
Hola chicos, @_cronos2, @zerokilled

Paso para saludar, esto ya lo tenéis muy avanzado

Un saludo

Pd: Nueva canción!! Black Sabbath, ahora Led Zeppeling, tendrás que acabar por escucha Motherwolf
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #10 (permalink)  
Antiguo 10/02/2011, 16:12
Avatar de zerokilled
Javascripter
  
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: Problema con timing (entre otros)
@cronos,

el problema en si no es getStyle, como ya explique antes, javascript tiene un error de precision al calcular con numeros y por alguna razon el ultimo ciclo de salida no lo realiza bien. un parcho a la ligera, lo que se me ocurre es que luego de asignar el nuevo valor, analices si el valor es menor que la variable incr. si es cierto, asignas a opacity el valor 0. de esta manera puedes controlar que el ciclo no continue. sin embargo, en el caso de salida('lento') el ultimo valor calculado es mayor que la variable incr. lo que hice fue que le sume a incr .01.

saludos a todos!
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #11 (permalink)  
Antiguo 10/02/2011, 16:56
Avatar de _cronos2
Colaborador
  
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 5 meses
Puntos: 310
Respuesta: Problema con timing (entre otros)
Cita:
Iniciado por Adler Ver Mensaje
Hola chicos, @_cronos2, @zerokilled

Paso para saludar, esto ya lo tenéis muy avanzado

Un saludo

Pd: Nueva canción!! Black Sabbath, ahora Led Zeppeling, tendrás que acabar por escucha Motherwolf
<offtopic>
Adler! :3 ¿Qué tal te va todo?
Jajajaja pues me gustan ^^
</offtopic>

Cita:
Iniciado por zerokilled Ver Mensaje
@cronos,

el problema en si no es getStyle, como ya explique antes, javascript tiene un error de precision al calcular con numeros y por alguna razon el ultimo ciclo de salida no lo realiza bien. un parcho a la ligera, lo que se me ocurre es que luego de asignar el nuevo valor, analices si el valor es menor que la variable incr. si es cierto, asignas a opacity el valor 0. de esta manera puedes controlar que el ciclo no continue. sin embargo, en el caso de salida('lento') el ultimo valor calculado es mayor que la variable incr. lo que hice fue que le sume a incr .01.

saludos a todos!
Al final lo solucioné así:
Código Javascript: 
Ver original
  1. salida : function(t){
  2.    var tempo = { 'lento' : 800, 'medio' : 500, 'rapido' : 200};
  3.    var tiempo = isFinite(t)?t:tempo[t], thix = P(this), incr = 20/tiempo;
  4.    thix.opacity(1);
  5.    var timer = setInterval(function(){
  6.     if(thix.opacity()<=incr*2) timer = clearInterval(timer);
  7.     else{
  8.      thix.opacity(parseFloat(thix.opacity())-incr);
  9.     }
  10.    }, 20);
  11.    return P(this);
  12.   },
Sin embargo, IE no reconoce la función opacity. En la consola pongo
Cita:
P('#s').opacity(0.5)
Y me dice:
Cita:
"Se esperaba una función"
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #12 (permalink)  
Antiguo 14/02/2011, 12:17
Avatar de _cronos2
Colaborador
  
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 5 meses
Puntos: 310
Respuesta: Problema con timing (entre otros)
Bueno ya logré hacerlo funcionar, al parecer IE se volvió loco ese día porque ahora sí me funcionaba P('#s').opacity(). Al final solucioné el problema con los filters así:
Código Javascript: 
Ver original
  1. opacity : function(){
  2.    if(arguments.length){
  3.     this.style.opacity = arguments[0];
  4.     this.style.filter = 'alpha(opacity=' + arguments[0] * 100 + ')';
  5.    }else
  6.     return P(this).getStyle('opacity');
  7.    return P(this);
  8.   },
y además me ahorro el array . Sigue sin gustarme lo poco preciso que es getStyle, pero supongo que esta solución es mejor que la otra.
Muchas gracias a los dos.
Saludos ^^
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:33.