DOM onResize evento

Question

Se ho questo

window.onresize = function() {
  alert('resized!!');
};

La mia funzione viene licenziato più volte di tutto il ridimensionamento, ma voglio catturare il di completamento del ridimensionamento. Questo è in IE.

Tutte le idee? Ci sono varie idee non mancano, ma non ha funzionato per me finora (presunto evento window.onresizeend esempio di IE.)

Answer 1

In questo caso, lo farei con forza suggerire debouncing. Il modo più semplice, efficace e affidabile per fare questo in JavaScript che ho trovato è plugin per jQuery di Ben Alman, acceleratore / rimbalzo . (può essere usato con o senza jQuery - Lo so ... suona strano)

Con antirimbalzo, il codice per fare questo sarebbe semplice come:

$(window).resize($.debounce(1000, function() {
   // Handle your resize only once total, after a one second calm.
   ...
}));

La speranza che possa aiutare qualcuno. ;)

Answer 2

Lo uso sempre quando voglio fare qualcosa dopo il ridimensionamento. Le chiamate al setTimeout e clearTimeout non sono di alcun impatto notevole sulla velocità del ridimensionamento, quindi non è un problema che questi sono chiamati più volte.

var timeOut = null;
var func = function() { /* snip, onresize code here */};
window.onresize = function(){
   if(timeOut != null) clearTimeout(timeOut);
   timeOut = setTimeout(func, 100);
}

Answer 3

Questa è non perfetto , ma dovrebbe dare l'avvio è necessario.

var initialX = null;
var initialY = null;
var lastResize = null;
var waiting = false;
var first = true;
var id = 0;

function updateResizeTime()
{
    if (initialX === event.clientX && initialY === event.clientY)
    {
        return;
    }

    initialX = event.clientX;
    initialY = event.clientY;

    if (first)
    {
        first = false;
        return;
    }

    lastResize = new Date();            
    if (!waiting && id == 0)
    {
        waiting = true;
        id = setInterval(checkForResizeEnd, 1000);
    }
}

function checkForResizeEnd()
{
    if ((new Date()).getTime() - lastResize.getTime() >= 1000)
    {
        waiting = false;
        clearInterval(id);
        id = 0;
        alert('hey!');
    }
}

window.onresize = function()
{
    updateResizeTime();
}

Answer 4

È possibile ottenere più eventi, perché ci sono davvero più eventi. Finestre anima il ridimensionamento facendo più volte mentre si trascina la finestra (per impostazione predefinita, è possibile modificare nel registro credo).

Che cosa si potrebbe fare è aggiungere un ritardo. Fare un clearTimeout, setTimout (myResize, 1000) ogni volta che l'evento di IE. Quindi, solo l'ultima farà il ridimensionamento vero e proprio.

Answer 5

Non so se questo potrebbe aiutare, ma dal momento che sembra funzionare perfettamente, eccolo qui. Ho preso il frammento dal post precedente e modificato leggermente. La funzione doCenter () prima traduce px a em e che sottrae la larghezza dell'oggetto e divide il resto per 2. Il risultato è assegnato come margine sinistro. doCenter () viene eseguito per centrare l'oggetto. incendi timeout quando la finestra viene ridimensionata esecuzione doCenter () di nuovo.

function doCenter() {
document.getElementById("menuWrapper").style.position = "fixed";
var getEM = (window.innerWidth * 0.063);
document.getElementById("menuWrapper").style.left = (getEM - 40) / 2 + "em";
}

doCenter();

var timeOut = null;
var func = function() {doCenter()};
window.onresize = function(){
    if (timeOut != null) clearTimeout(timeOut);
    timeOut = setTimeout(func, 100);
};

Answer 6

soluzione semplice javascript pura, basta cambiare il valore di 1.000 int ad essere inferiore per più reattività

        var resizing = false;
        window.onresize = function() {
            if(resizing) return;
            console.log("resize");
            resizing = true;
            setTimeout(function() {resizing = false;}, 1000);
        };

Answer 7

Mi è piaciuta soluzione elegante di Pim Jager, anche se penso che ci sia un parentesi extra alla fine e penso che forse il setTimeout dovrebbe essere "timeout = setTimeout (func, 100);"

Ecco la mia versione che utilizza Dojo (assumendo una funzione definita chiamato demo_resize ()) ...

var _semaphorRS = null;
dojo.connect(window,"resize",function(){
 if (_semaphorRS != null) clearTimeout(_semaphorRS);
 _semaphorRS = setTimeout(demo_resize, 500);
 });

. Nota: nella mia versione delle parentesi di trascinamento è necessario