I have written code below and basically grabs the element that is a scroll slide on a e-commerce website that changes its inline style attribute transform property every few second to slide the slideshow of images from left to right.

I want to observe the mutation change but only fire console.log (1 time) when it detects style attribute transform property change but I have problem. It is firing 40 - 50 times as the scroll slide change transform translate in x direction every 100 or pixels so mutation observer detects the change as 40 - 50 changes

how do i solve this issue of only having output console.log once and not 40-50 times. The scroll slide is also doing it continuously after page load every few seconds too.

  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']});