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

Как известно нет возможности подписаться на ресайз элемента.
Но следить надо. Поэтому я подписываюсь на события которые могут изменить размер элемента (в моем случае 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, что становится сигналом, что больше повторных вызовов не нужно делать. Именно этот момент мне больше всего не нравиться. (((

А как сделать лучше?
  • Вопрос задан
  • 2376 просмотров
Пригласить эксперта
Ответы на вопрос 1
BOOMER_74
@BOOMER_74
Full-Stack разработчик
Как вариант воспользоваться этим. Хоть проект и старый, но попробовать можно.

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

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

setTimeout(function () {
    if (__проверка_размеров__) {
        $("some.element").trigger("resize");
    }
}, 250);
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы