Как следить за ресайзом элемента?

Question

[Александр Маджугин]

Как известно нет возможности подписаться на ресайз элемента.
Но следить надо. Поэтому я подписываюсь на события которые могут изменить размер элемента (в моем случае click и mouseenter), однако проблема в том, что события могут сопровождаться или не сопровождаться анимацией изменения размера зараннее не известной природы, но разумной по времени.

Вот что я делаю (будем пологать что obj - объект jquery в глобальной области видимости, а oldHeight хранит его высоту тоже в глобальной области, в реальности это не так конечно):

obj.bind('mouseenter click', function(){resize();});

    function resize(latency) {
        
        if (latency == undefined) {
            latency = 200;
        }
        
        var heightsChange = false;
        
        var newHeight = obj.height();
        if (oldHeight != newHeight) {oldHeight = newHeight; heightsChange = true;}
        
        if (heightsChange) { // высоты изменились
            // какая-то реакция
            setTimeout(function(){resize(latency+10);}, latency); // на случай анимации изменения высоты
        } else {
            if (latency > 100) {
                if (latency > 200) {latency = 200}
                setTimeout(function(){resize(latency-25);}, latency); // на случай анимации изменения высоты
            }
        }
    }

Т.е. если высота изменилась я вызываю эту же функцию немного откладывая ее выполнение, на случай если анимация не закончилась. Когда высота не меняется, я откладываю ее выполнение тоже на некоторое время, на случай если анимация просто еще не началась, потепенно сокращая время, пока оно не станет меньше 101ms, что становится сигналом, что больше повторных вызовов не нужно делать. Именно этот момент мне больше всего не нравиться. (((

А как сделать лучше?

Comments

[Ольга]

а элемент размеры меняет случайным образом?Див ведь сам по себе ресайзиться не может,значит используется либо jqwery ui(а у него должны callback при изменении размеров),либо что-то кастомное(самому надо написать callback),либо он это делает по событию(которое должно быть известно, значит опять же можно привязаться). Опишите проблему по-подробнее,а то не понятно,почему нет возможности обнаружить событие ресайза.

[Александр Маджугин]

Ольга: Его всегда можно обноружить. В данном случае это slideUp джикверевский. Но теоретически может быть что угодно. Хотелось бы иметь готовый скрипт на будущее, легко подключающийся к чему угодно. Поэтому так. Но вы правы - наверное стоит разделить на два метода - resize и monitorResize.

Answer 1

[Сергей Новиков]

Как вариант воспользоваться этим. Хоть проект и старый, но попробовать можно.

Или ваш способ покороче:

$("some.element").resize(function () {
    $(this).stop(); // на случай, если элемент анимирован

    console.log("Resize!");
});

setTimeout(function () {
    if (__проверка_размеров__) {
        $("some.element").trigger("resize");
    }
}, 250);