javascript - llamar - jquery cargar pagina

jQuery: ¿cómo esperar el final de un evento de ''cambio de tamaño'' y solo luego realizar una acción?

Question

Así que actualmente uso algo como:

$(window).resize(function(){resizedw();});

Pero esto se llama muchas veces mientras continúa el proceso de cambio de tamaño. ¿Es posible atrapar un evento cuando termina?

Answer 1

ResizeStart y ResizeEnd eventos para ventana

http://jsfiddle.net/04fLy8t4/

Implementé una función que activa dos eventos en el elemento DOM del usuario:

1. reiniciar
2. cambio de tamaño

Código:

var resizeEventsTrigger = (function () {
    function triggerResizeStart($el) {
        $el.trigger(''resizestart'');
        isStart = !isStart;
    }

    function triggerResizeEnd($el) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function () {
            $el.trigger(''resizeend'');
            isStart = !isStart;
        }, delay);
    }

    var isStart = true;
    var delay = 200;
    var timeoutId;

    return function ($el) {
        isStart ? triggerResizeStart($el) : triggerResizeEnd($el);
    };

})();

$("#my").on(''resizestart'', function () {
    console.log(''resize start'');
});
$("#my").on(''resizeend'', function () {
    console.log(''resize end'');
});

window.onresize = function () {
    resizeEventsTrigger( $("#my") );
};

Answer 2

¡ACTUALIZAR!

La mejor alternativa también creada por mí está aquí: https://.com/a/23692008/2829600 (admite "eliminar funciones")

POSTE ORIGINAL:

Escribí esta función simple para manejar el retraso en la ejecución, útil dentro de jQuery .scroll () y .resize () Así que callback_f se ejecutará solo una vez para una cadena de identificación específica.

function delay_exec( id, wait_time, callback_f ){

    // IF WAIT TIME IS NOT ENTERED IN FUNCTION CALL,
    // SET IT TO DEFAULT VALUE: 0.5 SECOND
    if( typeof wait_time === "undefined" )
        wait_time = 500;

    // CREATE GLOBAL ARRAY(IF ITS NOT ALREADY CREATED)
    // WHERE WE STORE CURRENTLY RUNNING setTimeout() FUNCTION FOR THIS ID
    if( typeof window[''delay_exec''] === "undefined" )
        window[''delay_exec''] = [];

    // RESET CURRENTLY RUNNING setTimeout() FUNCTION FOR THIS ID,
    // SO IN THAT WAY WE ARE SURE THAT callback_f WILL RUN ONLY ONE TIME
    // ( ON LATEST CALL ON delay_exec FUNCTION WITH SAME ID  )
    if( typeof window[''delay_exec''][id] !== "undefined" )
        clearTimeout( window[''delay_exec''][id] );

    // SET NEW TIMEOUT AND EXECUTE callback_f WHEN wait_time EXPIRES,
    // BUT ONLY IF THERE ISNT ANY MORE FUTURE CALLS ( IN wait_time PERIOD )
    // TO delay_exec FUNCTION WITH SAME ID AS CURRENT ONE
    window[''delay_exec''][id] = setTimeout( callback_f , wait_time );
}


// USAGE

jQuery(window).resize(function() {

    delay_exec(''test1'', 1000, function(){
        console.log(''1st call to delay "test1" successfully executed!'');
    });

    delay_exec(''test1'', 1000, function(){
        console.log(''2nd call to delay "test1" successfully executed!'');
    });

    delay_exec(''test1'', 1000, function(){
        console.log(''3rd call to delay "test1" successfully executed!'');
    });

    delay_exec(''test2'', 1000, function(){
        console.log(''1st call to delay "test2" successfully executed!'');
    });

    delay_exec(''test3'', 1000, function(){
        console.log(''1st call to delay "test3" successfully executed!'');
    });

});

/* RESULT
3rd call to delay "test1" successfully executed!
1st call to delay "test2" successfully executed!
1st call to delay "test3" successfully executed!
*/

Answer 3

Aquí hay una secuencia de comandos MUY simple para activar un evento ''resizestart'' y ''resizeend'' en el objeto de la ventana.

No hay necesidad de revolcarse con fechas y horarios.

La variable d representa el número de milisegundos entre los eventos de cambio de tamaño antes de activar el evento final de cambio de tamaño, puede jugar con esto para cambiar la sensibilidad del evento final.

Para escuchar estos eventos todo lo que necesitas hacer es:

resizestart: $(window).on(''resizestart'', function(event){console.log(''Resize Start!'');});

resizeend: $(window).on(''resizeend'', function(event){console.log(''Resize End!'');});

(function ($) {
    var d = 250, t = null, e = null, h, r = false;

    h = function () {
        r = false;
        $(window).trigger(''resizeend'', e);
    };

    $(window).on(''resize'', function (event) {
        e = event || e;
        clearTimeout(t);

        if (!r) {
            $(window).trigger(''resizestart'', e);
            r = true;
        }

        t = setTimeout(h, d);
    });
}(jQuery));

Answer 4

Bueno, en lo que respecta al administrador de ventanas, cada evento de cambio de tamaño es su propio mensaje, con un principio y un final distintos, por lo que técnicamente, cada vez que se cambia el tamaño de la ventana, es el final.

Habiendo dicho eso, ¿quizás quiera establecer un retraso en su continuación? Aquí hay un ejemplo.

var t = -1;
function doResize()
{
    document.write(''resize'');
}
$(document).ready(function(){
    $(window).resize(function(){
        clearTimeout(t);
        t = setTimeout(doResize, 1000);
    });
});

Answer 5

Escribí una función que pasa una función cuando está envuelta en cualquier evento de cambio de tamaño. Utiliza un intervalo para que el cambio de tamaño no cree constantemente eventos de tiempo de espera. Esto le permite realizar independientemente del evento de cambio de tamaño que no sea una entrada de registro que debe eliminarse en producción.

https://github.com/UniWrighte/resizeOnEnd/blob/master/resizeOnEnd.js

        $(window).resize(function(){
            //call to resizeEnd function to execute function on resize end.
    //can be passed as function name or anonymous function
            resizeEnd(function(){



    });

        });

        //global variables for reference outside of interval
        var interval = null;
        var width = $(window).width();
    var numi = 0; //can be removed in production
        function resizeEnd(functionCall){
            //check for null interval
            if(!interval){
                //set to new interval
                interval = setInterval(function(){
        //get width to compare
                    width2 = $(window).width();
        //if stored width equals new width
                    if(width === width2){
                        //clear interval, set to null, and call passed function
                        clearInterval(interval);
                        interval = null; //precaution
                        functionCall();

                    }
        //set width to compare on next interval after half a second
                    width = $(window).width();
                }, 500);

            }else{
                //logging that should be removed in production
                console.log("function call " + numi++ + " and inteval set skipped");

            }

}

Answer 6

Escribí una pequeña función de envoltorio por mi cuenta ...

onResize  =   function(fn) {
    if(!fn || typeof fn != ''function'')
        return 0;

    var args    = Array.prototype.slice.call(arguments, 1);

    onResize.fnArr    = onResize.fnArr || [];
    onResize.fnArr.push([fn, args]);

    onResize.loop   = function() {
        $.each(onResize.fnArr, function(index, fnWithArgs) {
            fnWithArgs[0].apply(undefined, fnWithArgs[1]);
        });
    };

    $(window).on(''resize'', function(e) {
        window.clearTimeout(onResize.timeout);
        onResize.timeout    = window.setTimeout("onResize.loop();", 300);
    });
};

Aquí está el uso:

var testFn  = function(arg1, arg2) {
    console.log(''[testFn] arg1: ''+arg1);
    console.log(''[testFn] arg2: ''+arg2);
};

// document ready
$(function() {
    onResize(testFn, ''argument1'', ''argument2'');
});

Answer 7

Esta es una modificación del código de Dolan anterior. Agregué una función que verifica el tamaño de la ventana al inicio del cambio de tamaño y la compara con el tamaño al final del cambio de tamaño, si el tamaño es mayor o menor que el margen ( por ejemplo, 1000) luego se vuelve a cargar.

var rtime = new Date(1, 1, 2000, 12,00,00);
var timeout = false;
var delta = 200;
var windowsize = $window.width();
var windowsizeInitial = $window.width();

$(window).on(''resize'',function() {
    windowsize = $window.width();
    rtime = new Date();
    if (timeout === false) {
            timeout = true;
            setTimeout(resizeend, delta);
        }
});

function resizeend() {
if (new Date() - rtime < delta) {
    setTimeout(resizeend, delta);
    return false;
} else {
        if (windowsizeInitial > 1000 && windowsize > 1000 ) {
            setTimeout(resizeend, delta);
            return false;
        }
        if (windowsizeInitial < 1001 && windowsize < 1001 ) {
            setTimeout(resizeend, delta);
            return false;
        } else {
            timeout = false;
            location.reload();
        }
    }
    windowsizeInitial = $window.width();
    return false;
}

Answer 8

Este es el código que escribo de acuerdo con la respuesta de @Mark Coleman:

$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        console.log(''Resized finished.'');
    }, 250);
});

Gracias Mark!

Answer 9

Hay una solución elegante que utiliza Underscore.js . Si lo está utilizando en su proyecto, puede hacer lo siguiente:

$( window ).resize( _.debounce( resizedw, 500 ) );

Esto debería ser suficiente :) Pero, si está interesado en leer más sobre eso, puede consultar la publicación de mi blog: http://rifatnabi.com/post/detect-end-of-jquery-resize-event-using-underscore-debounce (enlace muerto)

Answer 10

Internet Explorer proporciona un evento resizeEnd . Otros navegadores activarán el evento de cambio de tamaño muchas veces mientras está cambiando el tamaño.

Hay otras grandes respuestas aquí que muestran cómo usar setTimeout y los métodos .throttle , .debounce desde lodash y el subrayado, por lo que mencionaré el complemento jQuery de Ben Alman, que cumple con lo que está buscando.

Supongamos que tiene esta función que desea activar después de un cambio de tamaño:

function onResize() {
  console.log("Resize just happened!");
};

Ejemplo de acelerador
En el siguiente ejemplo, onResize() solo se llamará una vez cada 250 milisegundos durante el cambio de tamaño de la ventana.

$(window).resize( $.throttle( 250, onResize) );

Ejemplo de rebote
En el siguiente ejemplo, onResize() solo se llamará una vez al final de una acción de cambio de tamaño de la ventana. Esto logra el mismo resultado que @Mark presenta en su respuesta.

$(window).resize( $.debounce( 250, onResize) );

Answer 11

La respuesta de Mark Coleman es ciertamente mucho mejor que la respuesta seleccionada, pero si desea evitar la variable global para el ID de tiempo de espera (la variable doit en la respuesta de Mark), puede hacer una de las siguientes acciones:

(1) Use una expresión de función inmediatamente invocada (IIFE) para crear un cierre.

$(window).resize((function() { // This function is immediately invoked
                               // and returns the closure function.
    var timeoutId;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function() {
            timeoutId = null; // You could leave this line out.
            // Code to execute on resize goes here.
        }, 100);
    };
})());

(2) Utilice una propiedad de la función de controlador de eventos.

$(window).resize(function() {
    var thisFunction = arguments.callee;
    clearTimeout(thisFunction.timeoutId);
    thisFunction.timeoutId = setTimeout(function() {
        thisFunction.timeoutId = null; // You could leave this line out.
        // Code to execute on resize goes here.
    }, 100);
});

Answer 12

No sé si mi código funciona para otros, pero realmente hace un gran trabajo para mí. Obtuve esta idea al analizar el código de Dolan Antenucci porque su versión no me funciona y realmente espero que sea útil para alguien.

var tranStatus = false;
$(window).resizeend(200, function(){
    $(".cat-name, .category").removeAttr("style");
    //clearTimeout(homeResize);
    $("*").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(event) {
      tranStatus = true;
    });
    processResize();
});

function processResize(){
  homeResize = setInterval(function(){
    if(tranStatus===false){
        console.log("not yet");
        $("*").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(event) {
            tranStatus = true;
        }); 
    }else{
        text_height();
        clearInterval(homeResize);
    }
  },200);
}

Answer 13

Puede almacenar una identificación de referencia en cualquier setInterval o setTimeout. Me gusta esto:

var loop = setInterval(func, 30);

// some time later clear the interval
clearInterval(loop);

Para hacer esto sin una variable "global" puede agregar una variable local a la función en sí. Ex:

$(window).resize(function() {
    clearTimeout(this.id);
    this.id = setTimeout(doneResizing, 500);
});

function doneResizing(){
  $("body").append("<br/>done!");   
}

Answer 14

Puede usar setTimeout() y clearTimeout() junto con jQuery.data :

$(window).resize(function() {
    clearTimeout($.data(this, ''resizeTimer''));
    $.data(this, ''resizeTimer'', setTimeout(function() {
        //do something
        alert("Haven''t resized in 200ms!");
    }, 200));
});

Actualizar

Escribí una extensión para mejorar el valor predeterminado de jQuery on (& bind ) -event-handler. Adjunta una función de controlador de eventos para uno o más eventos a los elementos seleccionados si el evento no se activó durante un intervalo determinado. Esto es útil si desea disparar una devolución de llamada solo después de un retraso, como el evento de cambio de tamaño, o de lo contrario. 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));

Úselo como cualquier otro controlador de eventos on o bind , excepto que 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/

Answer 15

Puedes usar setTimeout() y clearTimeout()

function resizedw(){
    // Haven''t resized in 100ms!
}

var doit;
window.onresize = function(){
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

Código de ejemplo en jsfiddle .

Answer 16

Tuve suerte con la siguiente recomendación: http://forum.jquery.com/topic/the-resizeend-event

Aquí está el código para que no tenga que buscar en el enlace y la fuente de su publicación:

var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        alert(''Done resizing'');
    }               
}

Gracias sime.vidas por el código!

Answer 17

Una solución es extender jQuery con una función, por ejemplo: resized

$.fn.resized = function (callback, timeout) {
    $(this).resize(function () {
        var $this = $(this);
        if ($this.data(''resizeTimeout'')) {
            clearTimeout($this.data(''resizeTimeout''));
        }
        $this.data(''resizeTimeout'', setTimeout(callback, timeout));
    });
};

Uso de la muestra:

$(window).resized(myHandler, 300);

Answer 18

esto funcionó para mí ya que no quería usar ningún plugin.

$(window).resize(function() {
    var originalWindowSize = 0;
    var currentWidth = 0;

    var setFn = function () {
        originalWindowSize = $(window).width();
    };

    var checkFn = function () {
        setTimeout(function () {
            currentWidth = $(window).width();
            if (currentWidth === originalWindowSize) {
                console.info("same? = yes") 
                // execute code 
            } else {
                console.info("same? = no"); 
                // do nothing 
            }
        }, 500)
    };
    setFn();
    checkFn();
});

En el nuevo tamaño de la ventana, invoque "setFn", que obtiene el ancho de la ventana y se guarda como "originalWindowSize". Luego invoque "checkFn", que después de 500 ms (o su preferencia) obtiene el tamaño actual de la ventana y compara el original con el actual, si no son iguales, entonces la ventana aún se está redimensionando. No olvide eliminar los mensajes de la consola en producción, y (opcional) puede hacer que "setFn" se ejecute automáticamente.

Answer 19

ya que la respuesta seleccionada realmente no funcionó ... y si no está utilizando jQuery, aquí hay una simple función de aceleración con un ejemplo de cómo usarla con el cambio de tamaño de la ventana.

    function throttle(end,delta) {

    var base = this;

    base.wait = false;
    base.delta = 200;
    base.end = end;

    base.trigger = function(context) {

        //only allow if we aren''t waiting for another event
        if ( !base.wait ) {

            //signal we already have a resize event
            base.wait = true;

            //if we are trying to resize and we 
            setTimeout(function() {

                //call the end function
                if(base.end) base.end.call(context);

                //reset the resize trigger
                base.wait = false;
            }, base.delta);
        }
    }
};

var windowResize = new throttle(function() {console.log(''throttle resize'');},200);

window.onresize = function(event) {
    windowResize.trigger();
}

Answer 20

(function(){
    var special = jQuery.event.special,
        uid1 = ''D'' + (+new Date()),
        uid2 = ''D'' + (+new Date() + 1);

    special.resizestart = {
        setup: function() {
            var timer,
                handler =  function(evt) {
                    var _self = this,
                        _args = arguments;
                    if (timer) {
                        clearTimeout(timer);
                    } else {
                        evt.type = ''resizestart'';
                        jQuery.event.handle.apply(_self, _args);
                    }

                    timer = setTimeout( function(){
                        timer = null;
                    }, special.resizestop.latency);
                };
            jQuery(this).bind(''resize'', handler).data(uid1, handler);
        },
        teardown: function(){
            jQuery(this).unbind( ''resize'', jQuery(this).data(uid1) );
        }
    };

    special.resizestop = {
        latency: 200,
        setup: function() {
            var timer,
                handler = function(evt) {
                    var _self = this,
                        _args = arguments;
                    if (timer) {
                        clearTimeout(timer);
                    }
                    timer = setTimeout( function(){
                        timer = null;
                        evt.type = ''resizestop'';
                        jQuery.event.handle.apply(_self, _args);
                    }, special.resizestop.latency);
                };

            jQuery(this).bind(''resize'', handler).data(uid2, handler);
        },
        teardown: function() {
            jQuery(this).unbind( ''resize'', jQuery(this).data(uid2) );
        }
    };
})();

$(window).bind(''resizestop'',function(){
    //...
});

Answer 21

var flag=true;
var timeloop;

$(window).resize(function(){
    rtime=new Date();
    if(flag){
        flag=false;
        timeloop=setInterval(function(){
            if(new Date()-rtime>100)
                myAction();
        },100);
    }
})
function myAction(){
    clearInterval(timeloop);
    flag=true;
    //any other code...
}

Answer 22

var resizeTimer;
$( window ).resize(function() {
    if(resizeTimer){
        clearTimeout(resizeTimer);
    }
    resizeTimer = setTimeout(function() {
        //your code here
        resizeTimer = null;
        }, 200);
    });

Esto funcionó para lo que estaba tratando de hacer en Chrome. Esto no activará la devolución de llamada hasta 200 ms después del último evento de cambio de tamaño.