0

Tengo este código el cual añade una clase aleatoriamente cada milisegundo a un div aleatorio. Pero es un proceso muy lento. ¿Hay alguna forma de que añada las clases aleatoriamente a varios divs al tiempo, digamos de a 10 cada vez y no uno por uno?.

$(document).ready(function () {
    var $divs = $("circle");
    var classes = ["animated fadeInRight", "animated fadeInLeft", "animated fadeInDown","animated fadeInUp","animated zoomInRight","animated zoomInLeft","animated zoomInDown","animated zoomInUp"];
    var interval = setInterval(function () {
        var $ds = $divs.not(".animated .fadeInLeft");
        $ds.eq(Math.floor(Math.random() * $ds.length)).addClass(classes[~~(Math.random()*classes.length)]);
        if ($ds.length == 1) {
            clearInterval(interval);
        }
    }, 1);
});
3
  • Con ese 1/1000 estas haciendo 1ms/1000, si querés que la función se ejecute cada 1 ms tenés que simplemente poner 1
    – Genarito
    Commented el 30 ene. 2017 a las 20:56
  • Con 1 funciona exactamente igual, prácticamente no se ve ninguna diferencia. Lo que quiero es que añada las clases de 10 en 10 no de una en una.
    – Maco Acero
    Commented el 30 ene. 2017 a las 23:55
  • Quiza con un for o un while?
    – Maco Acero
    Commented el 31 ene. 2017 a las 0:44

1 respuesta 1

0

Para empezar hay que tener en cuenta que generar números random puede ser un proceso lento. Yo te propongo el siguiente código:

$(document).ready(function () {
    var divs = $("circle");
    var cantidadPorCiclo = 10; // Cantidad de divs que seran modificados por cada interval
    var classes = ["animated fadeInRight", "animated fadeInLeft", "animated fadeInDown","animated fadeInUp","animated zoomInRight","animated zoomInLeft","animated zoomInDown","animated zoomInUp"];
    var ds = divs.not(".animated .fadeInLeft");
    var cantidadTotal = ds.length; // Obtengo la cantidad de divs que no estan animados
    var interval = setInterval(function () {
        if (cantidadTotal == 0) // Si ya hice todos los cambios
            clearInterval(interval);
        var maximo = (cantidadTotal > cantidadPorCiclo) ? cantidadPorCiclo : cantidadTotal; // Modifico de a 10, y en caso de que no haya tanto modifico menos
        for (var i = 0; i < maximo && cantidadTotal > 0; i++) {
            ds.eq(Math.floor(Math.random() * ds.length)).addClass(classes[Math.floor(Math.random() * classes.length)]);
            cantidadTotal--;
        }
    }, 200); // Lo hace cada 200 milisegundos para poder darle tiempo a que haga el calculo. Sigue siendo muy poco tiempo (2/10 de un segundo)
});

De esta forma por cada intervalo se setean 10 elementos.

Nota:

Si lo seteas con 1 ms se ejecuta la función de manera continua sin haber finalizado, abriendo muchos procesos en tan poco que tiempo que genera saturación de la memoria.

Espero que te sea de ayuda. Saludos!

1
  • Cabe aclarar que no probé el código, podría contener errores, pero fue a modo de refencia
    – Genarito
    Commented el 31 ene. 2017 a las 13:53

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.