DOM onResize evento

Question

Se ho questo

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

La mia funzione viene licenziato più volte tutta il ridimensionamento, ma voglio cogliere l'completamento del ridimensionamento. Questo è in IE.

Qualche idea? Ci sono varie idee là fuori, ma non ha funzionato per me finora (esempio IE presunto evento window.onresizeend.)

Answer 1

In questo caso, vorrei fortemente suggerire debouncing. Il modo più semplice, efficace e affidabile per farlo in JavaScript che ho trovato è Ben Alman's jQuery plugin, Throttle/Debounce (può essere usato con o senza jQuery - lo so ... sembra strano).

Con antirimbalzo, il codice per fare questo sarebbe il più semplice:

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

speranza che possa aiutare qualcuno. ;)

Answer 2

Si ottengono più eventi perché ci sono davvero più eventi. Windows anima il ridimensionamento eseguendolo più volte mentre si trascina la finestra (per impostazione predefinita, è possibile modificarlo nel Registro di sistema, credo).

Quello che potresti fare è aggiungere un ritardo. Esegui un timeout, impostaTimout (myResize, 1000) ogni volta che l'evento IE viene attivato. Quindi, solo l'ultimo eseguirà il ridimensionamento effettivo.

Answer 3

Questo è non perfetto ma dovrebbe darvi l'inizio 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

Lo uso sempre quando voglio fare qualcosa dopo il ridimensionamento. Le chiamate a setTimeout e clearTimeout non hanno alcun impatto notevole sulla velocità del ridimensionamento, quindi non è un problema che vengano chiamate 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 5

mi è piaciuto 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 con 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 è richiesta la parentesi finali.

Answer 6

Non sono sicuro che questo possa essere d'aiuto, ma dal momento che sembra funzionare perfettamente, eccolo qui. Ho preso lo snippet dal post precedente e l'ho leggermente modificato. La funzione doCenter() traduce prima px in em e poi sotterra la larghezza dell'oggetto e divide il resto di 2. Il risultato viene assegnato come margine sinistro. doCenter() viene eseguito per centrare l'oggetto. il timeout si attiva quando la finestra viene ridimensionata eseguendo nuovamente doCenter().

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 7

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); 
     };