Estaba esperando este complemento para jQuery que iba a funcionar, pero no:

http://andowebsit.es/blog/noteslog.com/post/how-to-fix-the-resize-event-in-ie
(enlace antiguo fue noteslog.com/post/how-to-fix-the-resize-event-in-ie ).

He añadido un comentario a su sitio, pero son moderados, por lo que podría no ver todavía.

Pero de todos modos, me explico mi deseo. Quiero un «redimensionar» tipo de evento se desencadena cuando el usuario detiene su tamaño, y/o complete su tamaño, no mientras el usuario está activamente arrastrar la ventana del navegador controlador de cambio de tamaño. Tengo una bastante compleja y que consume tiempo OnResizeHandled función que necesita para ejecutar, pero no se ejecuta 100 veces sólo porque el usuario se amplía la ventana de 100px y el evento fue despedido para siempre de píxeles de movimiento. Supongo que una mejor apuesta sería la de manejar una vez que el usuario ha completado el cambio de tamaño.

InformationsquelleAutor DMCS | 2009-03-20

7 Comentarios

  1. 9

    Prestadas algunas de las ideas de simultaneidad soluciones para gestionar la avalancha de acontecimientos que vienen desde el navegador.

    Por ejemplo, cuando entre por primera vez un evento de cambio de tamaño, se establece un indicador a true para indicar que el usuario está cambiando de tamaño. Establecer un tiempo de espera a llamada el cambio de tamaño de controlador de eventos después de 1 segundo. Entonces, cuando este indicador es cierto, ignorar el evento de cambio de tamaño. Luego, en el controlador, una vez que todo está hecho y correcta, establezca el indicador de vuelta a false.

    De esa manera solo proceso el último evento de una vez cada segundo (o algún otro período de tiempo, dependiendo de sus necesidades). Si el usuario hace una pausa en el medio de cambio de tamaño, se va a procesar. Si el usuario final, se volverá a proceso.

    Esto podría no ser adecuado para usted, pero hay muchas otras formas de uso de los bloqueos que podrían ser más útiles.

    • Eso es lo que el plugin de jQuery, pero no lo hace correctamente.
    • No tengo el conocimiento suficiente para hacerlo correctamente mí mismo. Por eso estoy pidiendo el conocimiento aquí. 🙂 Por CIERTO, yo no soy después de la anchura, la altura, la parte superior, a la izquierda. Estoy después de saber cuando el evento resize es completa (es decir, el usuario deje ir el navegador controlador de cambio de tamaño)
    • Oh, espera, yo se mezclaron. Demasiadas preguntas. Lo siento.
    • Bien, este tipo de cosas es muy fácil de hacer, así que no te desanimes. Vaya aquí: w3schools.com/htmldom/met_win_settimeout.asp va a comenzar en el SetTimeout función, que es realmente todo lo que necesita en esta situación. Cuando usted consigue un evento de cambio de tamaño, no directamente…
    • (continuación) … solo proceso el evento después de un cierto período de tiempo transcurrido. De esa manera usted no procesar el evento demasiado a menudo.
    • Amigo, la respuesta con el código, no sólo de palabras en inglés.
    • Eran mi objetivo eran meramente para dar respuestas, quisiera; sin embargo, mi meta es educar.

  2. 75

    ¿Un código como este:

    function resizeStuff() {
     //Time consuming resize stuff here
    }
    var TO = false;
    $(window).resize(function(){
     if(TO !== false)
        clearTimeout(TO);
     TO = setTimeout(resizeStuff, 200); //200 is time in miliseconds
    });

    Que debe asegurarse de que la función sólo cambia cuando el usuario deja de cambio de tamaño.

    • Lo siento, pero no entiendo cómo funciona esto… ¿cómo inicialmente PARA convertirse no es falsa? Veo que es falso, y entonces la única manera de hacerlo no es falsa es después de que ya no es falsa.
    • Edit: no importa, me dije A = setTimout era una parte de la si. La mala práctica de no utilizar llaves – hace que el código sea más difícil de leer rápidamente. Sólo los apoyos, amigo.
  3. 5

    Paul Irish tiene un gran Rebotada plugin de jQuery que resuelve este problema.

    • Eso es lo que me termina de codificación para mi la solución no demasiado tiempo después de que envió la pregunta original, yo había añadido un temporizador que aseguró que un evento de actualización sólo se iría a x número de milisegundos.
    • si eso es lo que acabé haciendo no se que hacer de esta la respuesta correcta? 🙂
    • Basado en la respuesta que he recibido en Marzo 20, 2011, de Welbog, lo programé mi propia. El 9 de abril de 2011 acepté su respuesta. Entonces, después de que ya he aceptado su respuesta, respondió el 16 de junio de 2011. Yo no uso de Pablo del plugin, yo escribí mi propio en algún lugar entre el 20 de Marzo y 9 de abril de 2011. Tienes dos upvotes por su tardía respuesta, que es equivalente en puntos a aceptado la respuesta.
    • ahh bueno…vale la pena un tiro 🙂
  4. 2

    Si usted está en las bibliotecas, se debe checkout resaltar, subrayado ya gestiona su necesidad y muchos más que probablemente tendrá en sus proyectos.

    aquí es un ejemplo de cómo subrayado debouncer obras:

    //declare Listener function
    var debouncerListener = _.debounce( function(e) {
    
        //all the actions you need to happen when this event fires
    
    }, 300 ); //the amount of milliseconds that you want to wait before this function is called again

    a continuación, acaba de llamar que debouncer función en el cambio de tamaño de la ventana

    window.addEventListener("resize", debouncerListener, false);

    checkout todo el carácter de subrayado funciones disponibles aquí http://underscorejs.org/

    • Gracias por la útil introducción a underscore.js
  5. 1

    Cómo acerca de la configuración de un tiempo de espera para cuando el usuario detiene el cambio de tamaño? Restablecer el tiempo de espera cuando cambio de tamaño se produce un incendio o el cambio de tamaño de controlador de eventos si vence el tiempo de espera.

    • ¿Cómo saber cuando el usuario detiene el cambio de tamaño? ¿Cuál es la sintaxis exacta en javascript/jQuery para obtener esta información que el usuario ha detenido?
    • Usted sabe que cuando el tamaño es «pausa» cuando la anchura y la altura del elemento no han cambiado durante un determinado período, es decir, el lapso de tiempo establecido.
  6. 0

    Ya que está construido en jQuery, no se puede enlazar algún tipo de onComplete evento a la extensión y pasar una función que se debe ejecutar cuando se llama?

    Edición:

    Cuando el usuario comienza a cambiar el tamaño de la ventana, establecer un intervalo de que los relojes de la ventana de dimensiones. Si las dimensiones no han cambiado en un pre-establecer el período de tiempo de su especificación, entonces usted puede considerar la posibilidad de la ventana de cambio de tamaño «completado». Su función javascript de elección en esto sería setInterval(), que acepta dos argumentos: una función para llamar a cada tick, y el tiempo que cada tick toma en milisegundos.

    Como a la forma de escribir que específicamente dentro del framework jquery, bueno, no sé lo suficiente acerca de jquery para ser capaz de decirle a usted que. Tal vez alguien te pueda ayudar más en particular, pero al mismo tiempo, usted puede considerar la ampliación de la extensión de jquery ya vinculado con un onComplete caso de que obras como la que acabo de describir.

    • Un onComplete evento sería muy bonito. Sin embargo, ¿cuál es el javascript o jQuery) sintaxis de comando para esto?
    • No sé lo suficiente acerca de jquery para proveer de usted una respuesta específica, pero Russ Cam sugiere que alrededor de la misma cosa en su solución. Voy a explicar en una edición.
  7. 0

    Me extendió hace unos días el defecto de jQuery on-controlador de eventos. Se adjunta una función de controlador de eventos para uno o más eventos a los elementos seleccionados si el evento no fue provocada por un intervalo de tiempo dado. Esto es útil si desea activar una devolución de llamada sólo después de un retraso, como el evento de cambio de tamaño, o más.
    https://github.com/yckart/jquery.unevent.js

    ;(function ($) {
        var methods = { on: $.fn.on, bind: $.fn.bind };
        $.each(methods, function(k){
            $.fn[k] = function () {
                var args = [].slice.call(arguments),
                    delay = args.pop(),
                    fn = args.pop(),
                    timer;
    
                args.push(function () {
                    var self = this,
                        arg = arguments;
                    clearTimeout(timer);
                    timer = setTimeout(function(){
                        fn.apply(self, [].slice.call(arg));
                    }, delay);
                });
    
                return methods[k].apply(this, isNaN(delay) ? arguments : args);
            };
        });
    }(jQuery));

    Usar como cualquier otro on o bind-controlador de eventos, excepto que usted puede pasar un parámetro extra como último:

    $(window).on('resize', function(e) {
        console.log(e.type + '-event was 200ms not triggered');
    }, 200);

    http://jsfiddle.net/ARTsinn/EqqHx/

Dejar respuesta

Please enter your comment!
Please enter your name here