DOM onresize événement

Question

Si j'ai ce

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

Ma fonction est congédié plusieurs fois tout au long redimensionné, mais je veux saisir l'achèvement du redimensionnement. C'est dans IE.

Des idées? Il existe différentes idées, mais cela n'a pas fonctionné pour moi jusqu'à présent (exemple de l'événement supposé window.onresizeend d'IE.)

Answer 1

Dans ce cas, je serais fortement suggère debouncing. La façon la plus simple, la plus efficace et la plus fiable de le faire en JavaScript que j'ai trouvée est Ben Alman's jQuery plugin, Throttle/Debounce (peut être utilisée avec ou sans jQuery - je sais ... ça sonne bizarre).

Avec debouncing, le code pour le faire serait aussi simple que:

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

espoir qui peut aider quelqu'un. ;)

Answer 2

Vous obtenez plusieurs événements car il y a vraiment plusieurs événements. Windows anime le redimensionnement en le faisant plusieurs fois lorsque vous faites glisser la fenêtre (par défaut, vous pouvez le changer dans le registre je pense).

Ce que vous pouvez faire est d'ajouter un délai. Effectuez un clearTimeout, setTimout (myResize, 1000) à chaque fois que l'événement IE se déclenche. Ensuite, seul le dernier fera le redimensionnement réel.

Answer 3

Ceci est pas parfait mais il devrait vous donner le début dont vous avez besoin.

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

Je l'utilise toujours quand je veux faire quelque chose après le redimensionnement. Les appels à setTimeout et clearTimeout n'ont aucun impact notable sur la vitesse du redimensionnement, donc ce n'est pas un problème que ceux-ci sont appelés plusieurs fois.

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

Answer 5

J'aimé solution élégante de Pim Jager, mais je pense qu'il ya un paren supplémentaire à la fin et je pense que peut-être le setTimeout devrait être « TIMEOUT = setTimeout (Func, 100); »

Voilà ma version en utilisant Dojo (en supposant une fonction définie appelée demo_resize()) ...

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

Note: dans ma version les paren de suivi est nécessaire.

Answer 6

Je ne sais pas si cela pourrait aider, mais comme il semble fonctionner parfaitement, le voici. J'ai pris l'extrait du post précédent et l'ai légèrement modifié. La fonction doCenter() convertit d'abord px en em et en soustrait la largeur de l'objet et divise le reste par 2. Le résultat est affecté en tant que marge gauche. doCenter() est exécuté pour centrer l'objet. timeout se déclenche lorsque la fenêtre est redimensionnée en exécutant à nouveau 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

solution simple et pur javascript, il suffit de changer la valeur 1000 int être plus bas pour plus de réactivité

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