@DeboshiR
Свободу разработчикам!!!

Как заставить MutationObserver адекватно срабатывать?

На странице jq-событие mousemove, которые при движении курсора изменяет положение элементов на экране - элементы приближаются на расстояние равное части расстояния до курсора. Позиция элементов абсолютна, изменятся только margin. На эти элементы весит MutationObserver, который должен возвращать margin при изменении, но возвращает не то значение margin, которое установлено по факту. Кусок кода:

linesTo.forEach((item) => {
        updateByMutation($('.dot').eq(item).get(0), item);
    })

container.find('#mouse').mousemove((e) => {
    container.find('.dot').each(function() {
        var posY = parseInt($(this).css('top')),
            posX = parseInt($(this).css('left')),
            l = Math.pow((Math.pow(posY - e.pageY, 2) + Math.pow(posX - e.pageX, 2)), 1 / 5) * 2,
            direction, offsetY, offsetX;

        direction = Math.atan2(posY - e.pageY, posX - e.pageX)

        offsetY = -Math.cos(direction) * l;
        offsetX = -Math.sin(direction) * l;

        $(this).css({
            'margin-top': offsetX + 'px',
            'margin-left': offsetY + 'px'
        });
    })
})

function updateByMutation(target, id) {
    const config = {
        attributes: true
    }, callback = function() {
        $('.dot .line').each(function() {
            console.log(parseFloat($(target).css('left')), parseFloat($(target).css('margin-left').replace('px', '')));

            if ($(this).data('lineTo') == id)
                $(this).css(drawLine({
                    x: $(this).parent().offset().left,
                    y: $(this).parent().offset().top
                }, {
                    x: parseFloat($(target).css('left')) + parseFloat($(target).css('margin-left').replace('px', '')),
                    y: parseFloat($(target).css('top')) + parseFloat($(target).css('margin-top').replace('px', ''))
                }))
        })        
    }, observer = new MutationObserver(callback);

    observer.observe(target, config);
}

Проблема вероятно заключается в вызове mousemove, но как это её можно исправить?
  • Вопрос задан
  • 113 просмотров
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae
Тлен
Именно из-за таких как ты отказались от удобного слушателя событий изменения элементов, и придумали наблюдатель.
Разница? Наблюдатель наблюдает и изредка, когда это не повлияет на скорость работы страницы, сбрасывает весь список изменений. В отличии от слушателя, который слушает каждое событие изменения.

Так делать нельзя, категорически. Это бессмысленная тяжёлая нагрузка. Ты вызываешь изменения стиля своей функцией, вот из этой функции и производи иные изменения. Тебе не нужны наблюдатели и события для этого.
Ответ написан
Ваш ответ на вопрос

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

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