Запустите функцию один раз в цикле MutationObserver forJavascript

Форум по Javascript
Ответить
Гость
 Запустите функцию один раз в цикле MutationObserver for

Сообщение Гость »


Я использую MutationObserver, чтобы наблюдать, не меняет ли какой-либо элемент класса last-move свой встроенный стиль. Например, это может выглядеть так: На странице есть два квадрата с этим классом last-move, поэтому мне нужно наблюдать, не изменится ли какой-нибудь из них. Если один или оба из них изменятся, я бы хотел запустить функцию pieceMoved(). Это основа, с которой я работаю.

function ObserveNewMove() { const targetElements = document.querySelectorAll('.last-move'); targetElements.forEach((targetElement) => { const наблюдатель = новый MutationObserver((mutationsList, наблюдатель) => { for (constmutation ofmutationsList) { // Цикл For, чтобы увидеть, изменился ли какой-либо из двух элементов. if (mutation.type === 'attributes' &&mutation.attributeName === 'style') { кусокMoved(); // Функция, вызываемая один раз. } } }); Observer.observe(targetElement, {атрибуты: true}); }); } Проблема заключается в том, что pieceMoved() вызывается как минимум дважды, поскольку два квадрата с классом last-move в большинстве случаев меняют стиль, но я бы например, чтобы pieceMoved() вызывался один раз, даже если цикл for выполняется в течение двух итераций.

Подводя итог, я бы хотел, чтобы pieceMoved() запускался только один раз, даже если цикл for выполняет больше итераций.

Я пробовал использовать разные типы систем флагов как с локальными, так и с глобальными переменными, начиная с «ложь-истина», затем «истина-ложь» и все, что между ними. Вот пример

function ObserveNewMove() { пусть флаг = ложь; const targetElements = document.querySelectorAll('.last-move'); targetElements.forEach((targetElement) => { const наблюдатель = новый MutationObserver((mutationsList, наблюдатель) => { for (constmutation ofmutationsList) { // Цикл For, чтобы увидеть, изменился ли какой-либо из двух элементов. if (mutation.type === 'attributes' &&mutation.attributeName === 'style') { если (флаг) { кусокMoved(); // Функция, вызываемая один раз. } флаг = правда; } } }); Observer.observe(targetElement, {атрибуты: true}); }); } Это будет работать при первом вызове observeNewMove(), но не при последующих перемещениях (поскольку observeNewMove() больше не вызывается, он работает вечно до отключения, если я правильно понял). Изменение размещения let flag = false; либо приведет к тому, что pieceMoved() никогда не будет вызываться (flag = false всегда, либо будет вызываться дважды время (flag = true всегда).
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»