Событие DOM onresize

Question

Если у меня есть это

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

Моя функция запускается несколько раз на протяжении всего изменение размера, но я хочу запечатлеть завершение из-за изменения размера.Это в IE.

Есть какие-нибудь идеи?Существуют различные идеи, но у меня пока что ничего не сработало (пример предполагаемого события window.onresizeend в IE.)

Answer 1

В этом случае я бы сильно предложите отказаться.Самый простой, эффективный и надежный способ сделать это в JavaScript, который я нашел, - это Плагин jQuery от Бена Алмана, Дросселирование / Деблокирование (может использоваться как с jQuery, так и без него - я знаю...звучит странно).

При демонтаже код для этого был бы таким простым, как:

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

Надеюсь, это может кому-то помочь.;)

Answer 2

Я всегда использую это, когда хочу что-то сделать после изменения размера.Призывы к setTimeout и clearTimeout не оказывают какого-либо заметного влияния на скорость изменения размера, поэтому не проблема, что они вызываются несколько раз.

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

Answer 3

Это не идеально но это должно дать вам старт, в котором вы нуждаетесь.

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

Вы получаете несколько событий, потому что событий действительно несколько.Windows анимирует изменение размера, делая это несколько раз при перетаскивании окна (по умолчанию, я думаю, вы можете изменить его в реестре).

Что вы могли бы сделать, так это добавить задержку.Выполняйте clearTimeout, setTimout(myResize, 1000) каждый раз, когда срабатывает событие IE.Затем только последний из них выполнит фактическое изменение размера.

Answer 5

Не уверен, может ли это помочь, но поскольку кажется, что это работает идеально, вот оно.Я взял фрагмент из предыдущего поста и немного изменил его.Функция doCenter() сначала преобразует px в em, а затем вычитает ширину объекта и делит оставшуюся часть на 2.Результат присваивается как левое поле.doCenter() выполняется для центрирования объекта.тайм-аут срабатывает при изменении размера окна при повторном выполнении 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 6

простое решение на чистом javascript, просто измените значение 1000 int на меньшее для большей оперативности

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

Answer 7

Мне понравилось элегантное решение Pim Jager, хотя я думаю, что в конце есть дополнительный параметр paren, и я думаю, что, возможно, значение setTimeout должно быть "timeOut = setTimeout(func,100);"

Вот моя версия с использованием Dojo (предполагая, что определенная функция называется demo_resize())...

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

Примечание:в моей версии требуется завершающий параметр paren.