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

Question

[Ингвар Фон Бьёрк]

На странице 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, но как это её можно исправить?

Answer 1

[Aetae]

Именно из-за таких как ты отказались от удобного слушателя событий изменения элементов, и придумали наблюдатель.
Разница? Наблюдатель наблюдает и изредка, когда это не повлияет на скорость работы страницы, сбрасывает весь список изменений. В отличии от слушателя, который слушает каждое событие изменения.

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

Comments

[Ингвар Фон Бьёрк]

Да ты чё? Думаешь я не пытался цепляться в mousemove за изменения стиля?

[twoone]

Поддерживаю. Здесь совершенно не нужны ни MutationObser, ни margin.