Événement DOM OnResize

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

Ce n'est pas parfait mais cela 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();
}

Vous obtenez plusieurs événements car il y a vraiment plusieurs événements. Windows anime la redimensionner 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 pourriez faire est d'ajouter un retard. Faites un cleartimeout, setTimout (myResize,1000) chaque fois que L'événement IE se déclenche. Ensuite, seul le dernier fera le redimensionnement réel.

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'a modifié légèrement. La fonction doCenter() traduit d'abord px en em et que soustrait la largeur de l'objet et divise le reste par 2. Le résultat est attribué en tant que marge gauche. doCenter() est exécuté pour centrer l'objet. le délai d'attente 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);
};

Solution javascript pure Simple, il suffit de changer la valeur 1000 int pour être inférieure pour plus de réactivité

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

J'ai aimé la solution élégante de Pim Jager, bien que je pense qu'il y a un paren supplémentaire à la fin et je pense que peut-être le setTimeout devrait être "timeOut = setTimeout ( func, 100);"

Voici ma version 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);
 });

Remarque: dans ma version, le paren final est requis.