L'événement de DOM

Question

Si j'ai cette

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

Ma fonction plusieurs fois mis le feu se à travers redimensionné, mais je veux capturer le fin de la Redimensionner. Ceci est dans IE.

Toutes les idées? Il y a différentes idées là-bas, mais pas a travaillé pour moi jusqu'à présent (par exemple IE de l'événement window.onresizeend supposé.)

Answer 1

Dans ce cas, je voudrais fortement suggérer debouncing. La façon la plus simple, efficace et fiable pour faire en JavaScript que j'ai trouvé est plugin jQuery Ben Alman, gaz / anti-rebond . (peut être utilisé avec ou sans jQuery - Je sais ... sons impair)

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

L'espoir qui peut aider quelqu'un. ;)

Answer 2

Je l'utilise toujours quand je veux faire quelque chose après le redimensionnement. Les appels à setTimeout et clearTimeout ne sont pas d'un impact notable sur la vitesse du redimensionnement, il est donc 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 3

pas parfait mais il devrait vous donner le départ 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

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

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

Answer 5

Je ne sais pas si cela peut aider, mais comme il semble fonctionner parfaitement, voilà. J'ai pris l'extrait de l'article précédent et modifié légèrement. La fonction doCenter () traduit première px à em et que soustrait la largeur de l'objet et divise le reste par 2. Le résultat est affecté en tant que marge de gauche. doCenter () est exécutée pour centrer l'objet. des feux de dépassement de délai lorsque la fenêtre est redimensionnée d'exécution doCenter () à nouveau.

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

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

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

Answer 7

J'ai 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); »

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

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

Note:. Dans ma version les paren arrière est requis