setTimeout mientras otras acciones

[neb642]

Hola a todos, intento hacer que mientras se cargen las imagenes de mi páginas aparezca un

"Cargando..." dinámico (los tres puntitos van apareciendo/desapareciendo)

El problema es que la carga de imágenes se debería realizar al mismo tiempo que la función que hace el dinamismo del cargando, y no lo hace:

Código:

	window.onload = function () {
	window.setTimeout("cargando()", 500);
	(mis acciones)
	(mis acciones)
	(mis acciones)
	(mis acciones)
	divcarga.style.display='none';
}


function cargando() {
	var divcarga = document.getElementById('carg');
	if (divcarga.innerHTML=="Cargando") {divcarga.innerHTML="Cargando."}
	if (divcarga.innerHTML=="Cargando.") {divcarga.innerHTML="Cargando.."}
	if (divcarga.innerHTML=="Cargando..") {divcarga.innerHTML="Cargando..."}
	if (divcarga.innerHTML=="Cargando...") {divcarga.innerHTML="Cargando."}
}

Gracias de antemano

[zerokilled]

buenas,
primero, no tiene sentido realizar la animacion o el proceso que fuera en el evento onload. especificamente porque onload se inicia cuando ya todo haya cargado, incluyendo las imagenes. la animacion tendrias que invocarla en una de dos formas: usando el evento DOMContentLoaded o invocando la animacion cuando gran parte de los elementos haya sido analizado por el navegador. el primero es un tipo de evento que aun no esta en gran difusion. dicho evento se dispara cuando el navegador ha terminado de analizar y crear el DOM sin tomar en cuenta el estado de otros recursos. por ejemplo, imagenes, video, audio, scripts, hoja de estilos, etc. el segundo, es la tecnica mas difundida. simplemente ubica el script al final del documento pero antes de la etiqueta </body>.

el segundo detalle es que la animacion solo se ejecuta una sola vez. a diferencia de setTimeout, setInterval se ejecuta por un periodo indefinido hasta que se detenga con clearInterval. con setTimeout se puede lograr el comportamiento de setInterval con tan solo hacer una invocacion recursiva a la misma funcion. una vez tengas la animacion en ciclo (setInterval o invocacon recursiva de setTimeout), en onload detienes la animacion. notese que la forma de detener cada tecnica son distinta. para setInterval solo basta con pasar el id a clearInterval mientras que con setTimeout debes implentar un patron de comprobacion del estado de un valor. por ejemplo, una variable con un boolean donde false indique aun no ha terminado de cargar los recursos (por tanto, la invocacion recursiva continua) y true para el caso contrario.

[neb642]

Perfecto, creo que entendí:

Pongo la animación de cargando en DOMContentLoaded (primer forma) o coloco el script al final del documento

La animación la hago con setInterval, y la detengo al final de onload con clearInterval.

Gracias por el dato de la comprobación de un valor, lo he entendido.

[neb642]

Vuelvo a escribir porque me ha pasado algo raro...

resulta que si hago esto:

Código:

<script type="text/javascript">
var divcarga = document.getElementById('carg');
var cargar=window.setInterval("cargaraccion()", 500);
function cargaraccion(){
if (divcarga.innerHTML=="Cargando") {divcarga.innerHTML="Cargando.";}
if (divcarga.innerHTML=="Cargando.") {divcarga.innerHTML="Cargando..";}
if (divcarga.innerHTML=="Cargando..") {divcarga.innerHTML="Cargando...";}
if (divcarga.innerHTML=="Cargando...") {divcarga.innerHTML="Cargando";}
}
</script>

El código no funciona, pero sí lo hace cuando lo escribo así:

Código:

<script type="text/javascript">
var divcarga = document.getElementById('carg');
var cargar=window.setInterval("cargaraccion()", 500);
function cargaraccion(){
if (divcarga.innerHTML=="Cargando") {divcarga.innerHTML="Cargando."; alert("hola");}
if (divcarga.innerHTML=="Cargando.") {divcarga.innerHTML="Cargando.."; alert("hola2");}
if (divcarga.innerHTML=="Cargando..") {divcarga.innerHTML="Cargando..."; alert("hola3"); }
if (divcarga.innerHTML=="Cargando...") {divcarga.innerHTML="Cargando"; alert("hola4");}
}
</script>

Alguien sabe por qué se comporta de esta manera? Saludos

[_cronos2]

Comprueba qué te dice la consola de errores, pero es extraño. Por cierto:
a) setInterval/Timeout pueden recibir un string o un handler como primer parámetro, pero te recomiendo que si puedes uses el handler. Es decir:

Código:

var cargar=window.setInterval(cargaraccion, 500);

b) Para eliminar código redundante en cargaraccion, podrías hacer algo como:

Código Javascript:

String.prototype.repetir = function(n){
 var i = 0, str = '';
 while(i++ < n){ str += this; }
 return str;
}
window.contador = 0;
function cargaraccion(){
 divcarga.innerHTML = "Cargando" + '.'.repetir(window.contador++ % 4);
}
 

Saludos (:

[neb642]

Hola _cronos2, gracias por responder.

Mira, el código que me pasaste funciona perfecto.
Le eché una mirada rápida pero hay algunas cosas que no entiendo como

1. el punto antes de la palabra repetir (en la línea 8) es para no poner "String.prototype" ?

2. ¿Cúando String.prototype.repetir comienza a valer un valor no nulo? Ya que al principio tiene un valor nulo devuelto por str, que se le concatena a str y este lo vuelve a devolver.

Seguramente es un pregunta tonta, sabe que soy novato en Javascript.

Saludos

[Aijoona]

El punto es para acceder a las propiedades y metodos deun objeto. Un string es un objeto:

'abc'.toUpperCase(); // "ABC"
'abc'.repetir(3); "abcabcabc"

---

@cronos

Ya que te veo usar mucho el metodo 'repetir', te paso la implementacion mas copada que vi hasta el momento (Prototype.js):

Código Javascript:

/**
 * String#times(count) -> String
 *
 * Concatenates the string `count` times.
 *
 * ##### Example
 *
 * "echo ".times(3);
 * // -> "echo echo echo "
 */
String.prototype.times = function (count) {
  return count < 1 ? '' : new Array(count + 1).join(this);
}
 
'a'.times(3) // "aaa"
 

[_cronos2]

Iniciado por neb642

1. el punto antes de la palabra repetir (en la línea 8) es para no poner "String.prototype" ?

2. ¿Cúando String.prototype.repetir comienza a valer un valor no nulo? Ya que al principio tiene un valor nulo devuelto por str, que se le concatena a str y este lo vuelve a devolver.

1.- Como bien dice @Aijonaa (), el punto es para acceder a las propiedades/métodos de un objeto. Sin embargo, también podrías escribir esto:

Código:

String.prototype.repetir.call('.', window.contador % 4);

, pero no tendría mucho sentido.

2.- Si te das cuenta, la función repetir es así:

Código:

String.prototype.repetir = function(n){
 var i = 0, str = '';
 while(i++ < n){ str += this; }
 return str;
}

Primero se declara la variable global str como un string vacío, y después se le añade el string this n veces. this hace referencia al string desde el que se llama la función.

Iniciado por Aijoona

@cronos

Ya que te veo usar mucho el metodo 'repetir', te paso la implementacion mas copada que vi hasta el momento (Prototype.js):

Código Javascript:

/**
 * String#times(count) -> String
 *
 * Concatenates the string `count` times.
 *
 * ##### Example
 *
 * "echo ".times(3);
 * // -> "echo echo echo "
 */
String.prototype.times = function (count) {
  return count < 1 ? '' : new Array(count + 1).join(this);
}
 
'a'.times(3) // "aaa"
 

En realidad no es que la use a menudo, es que la he encontrado útil en dos de mis últimos posts, pero sí me gusta tenerla a mano. Es una de las pocas cosas que echo de menos de PHP
Muchas gracias por el aporte
Saludos (:

[Aijoona]

Si quisies imitar a la de PHP no usarias el objeto String, porque PHP no tiene objeto string! :p

[zerokilled]

@neb642,
dado tu nivel de conocimiento, he de aclarar algunos detalles para que en el futuro no cometas el error de adquirir conceptos erroneos.

Iniciado por neb642

al principio tiene un valor nulo devuelto por str

una variable con valor de string vacio no es lo mismo que nulo. de hecho, si la variable fuera nula al concatenar con otro string el resultado seria "null string concatenado".

Código:

console.log("" == null); // false
console.log(null + "string"); // "nullstring";

Iniciado por cronos

Primero se declara la variable global str como un string vacío, y después se le añade el string this n veces.

en el codigo de @cronos, ninguna de las variables del metodo repetir son globales puesto que estan iniciada con la declaracion var. por tanto, son locales al metodo.

Iniciado por Aijoona

Un string es un objeto:

un string no es tecnicamente un objeto. lo que sucede en este caso es que algunos datos primitivos -integer, string, boolean- contienen un envoltorio. es un mecanismo donde al tratar el valor como objeto, el valor es convertido a un objeto de forma implicita y luego es retirado. la utilidad es que te permite accesar las propiedad y metodos heredadas en el prototipo del constructor al que pertenece. es decir, un string pertenece al constructor String, un numero al constructor Number, etc. considera el siguiente caso que demuestra que un dato primitivo no es un objeto.

Código:

var str = "string";
str.customProperty = true;
console.log(str.customProperty); // undefined;

[Aijoona]

@Zero

No hilaba tan fino a la hora de referirme a un 'objeto', si bien es cierto lo que mencionas no era ciertamente relevante.

Saludos.

[_cronos2]

Iniciado por Aijoona

Si quisies imitar a la de PHP no usarias el objeto String, porque PHP no tiene objeto string! :p

Esa es una de las cosas que echo de menos en PHP de JS: los prototipos. Odio tener que pasar lo que quiero modificar como argumento

Iniciado por zerokilled

en el codigo de @cronos, ninguna de las variables del metodo repetir son globales puesto que estan iniciada con la declaracion var. por tanto, son locales al metodo.

No puedo decir nada, tengo un zapato en la boca.
Además según lo estaba escribiendo pensé "le tengo que explicar que creo una variable local"... Falta de atención por mi parte
Saludos (:

[Panino5001]

Ciertamente no comprendo la valoración negativa de InKarC al comentario de zerokilled. Yo lo veo correctísimo (al aporte de zerokilled). Sería bueno que explicara el motivo de la valoración negativa así aprendemos todos.

[_cronos2]

Iniciado por Panino5001

Ciertamente no comprendo la valoración negativa de InKarC al comentario de zerokilled. Yo lo veo correctísimo (al aporte de zerokilled). Sería bueno que explicara el motivo de la valoración negativa así aprendemos todos.

¿De qué estamos hablando ?

[Panino5001]

Del comentario #10 de este hilo (si hacés click sobre el numerito rojo (no sobre la flecha) verás que InKarC piensa -no aparece el motivo- que está mal ese comentario).

[_cronos2]

Parece que me lo vas a tener que explicar para tontos, porque si hago click en el '-1' que está en rojo no pasa nada, ni si quiera hay un cursor:pointer
Saludos (:

[Panino5001]

Mmm, quizá sea una opción del status "colaborador" (pensé que estaba disponible para todos). Es sólo una ventana con el/los nombre/s de quien/es emite/n la valoración.

[_cronos2]

Ahhh, pues sí, supongo que será eso. De todas formas, si me lo dices tú me lo creo aunque no lo pueda ver
Ahora sólo falta que se pase por aquí y nos explique qué pasó.
Saludos (:

[neb642]

Iniciado por zerokilled

@neb642,
dado tu nivel de conocimiento, he de aclarar algunos detalles para que en el futuro no cometas el error de adquirir conceptos erroneos.


una variable con valor de string vacio no es lo mismo que nulo. de hecho, si la variable fuera nula al concatenar con otro string el resultado seria "null string concatenado".

Código:

console.log("" == null); // false
console.log(null + "string"); // "nullstring";

en el codigo de @cronos, ninguna de las variables del metodo repetir son globales puesto que estan iniciada con la declaracion var. por tanto, son locales al metodo.


un string no es tecnicamente un objeto. lo que sucede en este caso es que algunos datos primitivos -integer, string, boolean- contienen un envoltorio. es un mecanismo donde al tratar el valor como objeto, el valor es convertido a un objeto de forma implicita y luego es retirado. la utilidad es que te permite accesar las propiedad y metodos heredadas en el prototipo del constructor al que pertenece. es decir, un string pertenece al constructor String, un numero al constructor Number, etc. considera el siguiente caso que demuestra que un dato primitivo no es un objeto.

Código:

var str = "string";
str.customProperty = true;
console.log(str.customProperty); // undefined;

Gracias a todos por participar y aclararme conceptos. Voy aprendiendo.

Al final quedamos en que tanto la variable i como la variable str son locales porque están dentro de una funcion.

Tengo una última pregunta no referida con el tema, (es una tontera como para crear otro tema) y cierran el tópico:

Si quiero que de forma dinámica apareza un div, ¿Qué me conviene:

1. Tenerlo oculto desde un principio y hacerlo aparecer con JS (de esta forma el evento onload tardaría más en suceder?)

2. Crear el div en cuestión con JS ?

Saludos

[zerokilled]

hola,
no veo porque te cerrarian el tema, sea o no una tonteria. lo que si es cierto es que seguramente ya hay temas parecido a tu nueva duda en como hacerlo. sin embargo, tu duda en particular es sobre recomendacion. en mi opinion, debes ponerlo en balanza. si el contenido a mostrar es sumamente importante para el usuario, inicialmente yo no lo ocultaria. ¿por que? porque puede darse el caso que el usuario no tenga activado javascript. entonces, lo que haria es ocultar el contenido solo si javascript esta disponible. ¿como? cargando o agregando codigo css a traves de javascript. la otra metodologia, creando el <div> con javascript presentaria este problema. si el contenido no es tan importante o relevante, daria igual cual de las dos formas lo haga. en cuanto a rendimiento, no creo que tenga tanta diferencia. claro, dependiendo el tipo de contenido que sea. por ejemplo, si es para mostrar una imagen grande, probablemente lo preferible sea crear el <div> cuando el usuario solicite -o cuando tu decidas- leerlo. si lo ocultas de entrada, la carga del contenido puede afectar la experiencia del usuario dando la sensacion de que todo va muy lento. en resumen, depende de la importancia del contenido y su peso.

Al final quedamos en que tanto la variable i como la variable str son locales porque están dentro de una funcion.

nota... las variables no son locales especificamente porque estan dentro del cuerpo de la funcion, sino porque estan declaradas con var. es importante diferenciarlo porque tambien es posible crear variables dentro del cuerpo de la funcion y que sean globales.

[neb642]

Iniciado por zerokilled

hola,
no veo porque te cerrarian el tema, sea o no una tonteria. lo que si es cierto es que seguramente ya hay temas parecido a tu nueva duda en como hacerlo. sin embargo, tu duda en particular es sobre recomendacion. en mi opinion, debes ponerlo en balanza. si el contenido a mostrar es sumamente importante para el usuario, inicialmente yo no lo ocultaria. ¿por que? porque puede darse el caso que el usuario no tenga activado javascript. entonces, lo que haria es ocultar el contenido solo si javascript esta disponible. ¿como? cargando o agregando codigo css a traves de javascript. la otra metodologia, creando el <div> con javascript presentaria este problema. si el contenido no es tan importante o relevante, daria igual cual de las dos formas lo haga. en cuanto a rendimiento, no creo que tenga tanta diferencia. claro, dependiendo el tipo de contenido que sea. por ejemplo, si es para mostrar una imagen grande, probablemente lo preferible sea crear el <div> cuando el usuario solicite -o cuando tu decidas- leerlo. si lo ocultas de entrada, la carga del contenido puede afectar la experiencia del usuario dando la sensacion de que todo va muy lento. en resumen, depende de la importancia del contenido y su peso.


nota... las variables no son locales especificamente porque estan dentro del cuerpo de la funcion, sino porque estan declaradas con var. es importante diferenciarlo porque tambien es posible crear variables dentro del cuerpo de la funcion y que sean globales.

Ok. Tomé nota.

No sabía que se podían crear variables globales (no estamos hablando de asignar un valor verdad?) dentro de una función. Te molestaría darme un ejemplo? Gracias nuevamente y saludos

[_cronos2]

Iniciado por neb642

Ok. Tomé nota.

No sabía que se podían crear variables globales (no estamos hablando de asignar un valor verdad?) dentro de una función. Te molestaría darme un ejemplo? Gracias nuevamente y saludos

Fíjate:

Código Javascript:

console.log(variable); // undefined
 
(function(){
 variable = 'Variable global declarada desde una función';
})();
 
console.log(variable); // 'Variable global declarada desde una función'
 

Saludos (:

[InKarC]

Iniciado por Panino5001

Ciertamente no comprendo la valoración negativa de InKarC al comentario de zerokilled. Yo lo veo correctísimo (al aporte de zerokilled). Sería bueno que explicara el motivo de la valoración negativa así aprendemos todos.

La calificacion negativa es por 2 motivos.

1) String SI ES un objeto (técnicamente, literalmente y simbólicamente), lo que sucede es que cuando no es creado explicitamente como uno (new String()) el interprete automáticamente lo crea antes de llamar al método e inmediatamente después lo destruye (teniendo solo acceso a los metodos del prototype y retornando solo el valor primitivo string).

Código Javascript:

var texto = new String("Cadena de texto")
texto.prohibido = true;
alert(texto.prohibido) // true
 

2) Ademas para efectos practicos la unica capacidad que se pierde cuando no es creado explicitamente como un objeto es solo esa; que no funciona añadirle propiedades y metodos de forma directa (e.j: texto.prohibido = true) ya de por si un novato ni siquiera sabe que eso se puede hacer con los objetos en javascript.

[Panino5001]

Imaginaba que una calificación negativa a ese post sólo podía deberse a un error conceptual. zerokilled no dijo que String no fuera un objeto. Lo que dijo es que un valor primitivo no es un objeto. (Notar que no escribió String sino string, es decir, cadena -es evidente que conocés la diferencia porque usás también esa diferenciación en tu respuesta-).
Que un valor primitivo no es un objeto es innegable. Algunos autores (muy osados) los consideran pseudo-objetos, lo cual también es erróneo.

Me pareció bien la aclaración de zerokilled para evitar confusiones.

Te recomiendo esta lectura:
http://dmitry.baranovskiy.com/post/o...ascript-part-i