He escrito el código a continuación y básicamente toma el elemento que es una diapositiva de desplazamiento en un sitio web de comercio electrónico que cambia su propiedad de transformación de atributo de estilo en línea cada pocos segundos para deslizar la presentación de imágenes de izquierda a derecha.
Quiero observar el cambio de mutación, pero solo disparar console.log (1 vez) cuando detecta un cambio de propiedad de transformación de atributo de estilo, pero tengo un problema. Está disparando 40 - 50 veces a medida que la transformación de cambio de deslizamiento de desplazamiento se traduce en la dirección x cada 100 o píxeles, por lo que el observador de mutación detecta el cambio como 40 - 50 cambios
¿Cómo resuelvo este problema de solo tener salida console.log una vez y no 40-50 veces? La diapositiva de desplazamiento también lo hace continuamente después de cargar la página cada pocos segundos.
var styleMutate = function(mutations, observer) { mutations.forEach(function(mutationRecord) { if(mutationRecord.attributeName === 'style') { //fireGaEvent('Image gallery scrolls to the right'); console.log("style change"); console.log(mutationRecord); } observer.disconnect(); }); }; var observer = new MutationObserver(styleMutate); var target = document.getElementsByClassName('touchcarousel-container')[0]; observer.observe(target, { attributes : true, attributeFilter : ['style']});