evento DOM onresize

Question

Se eu tiver essa

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

A minha função é disparado várias vezes todo o redimensionamento, mas eu quero capturar o conclusão do redimensionamento. Esta é no IE.

Todas as idéias? Há várias idéias lá fora, mas não funcionou para mim até agora (exemplo suposto evento window.onresizeend do IE.)

Answer 1

Neste caso, gostaria de fortemente sugiro debouncing. O mais simples, eficaz e maneira confiável para fazer isso em JavaScript que eu encontrei é plugin jQuery de Ben Alman, acelerador / Debounce (pode ser usado com ou sem jQuery - Eu sei ... soa estranho).

Com debouncing, o código para fazer isso seria tão simples como:

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

Hope que pode ajudar alguém. ;)

Answer 2

Eu sempre uso isso quando eu quiser fazer algo após o redimensionamento. As chamadas para setTimeout e clearTimeout não são de qualquer impacto perceptível sobre a velocidade do redimensionamento, por isso não é um problema que estes são chamados várias vezes.

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

Answer 3

Esta é não aperfeiçoar , mas deve dar-lhe a começar você precisa.

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

Você recebe vários eventos porque há realmente vários eventos. Janelas anima o redimensionamento por fazê-lo várias vezes enquanto você arrasta a janela (por padrão, você pode alterá-lo no Registro eu acho).

O que você poderia fazer é adicionar um atraso. Fazer um clearTimeout, setTimout (myResize, 1000) cada vez que o evento é acionado IE. Então, apenas o último irá fazer o redimensionamento real.

Answer 5

Não sei se isso pode ajudar, mas desde que ele parece estar funcionando perfeitamente, aqui está. Tomei o trecho do post anterior e modificado ligeiramente. A função doCenter () primeiro traduz px de EM e de substratos a largura do objecto e divide o restante por 2. O resultado é atribuído como margem esquerda. doCenter () é executado para centralizar o objeto. fogos de tempo limite quando a janela é redimensionada execução doCenter () novamente.

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

solução javascript puro simples, basta alterar o valor 1000 int a ser menor por mais capacidade de resposta

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

Answer 7

Eu gostava solução elegante do Pim Jager, embora eu acho que há um parêntese extras no final e eu acho que talvez o setTimeout deve ser "timeout = setTimeout (func, 100);"

Aqui está a minha versão usando Dojo (assumindo uma função chamada demo_resize definido ()) ...

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

Nota:. Na minha versão dos paren de fuga é necessária