0

I made a script using nested intervals to check if the current window.scrollY is above a certain value. The script works and the output is correct, my problem is with Chrome displaying "[Violation] 'setInterval' handler took ms' and keeps on doing that forever..

All intervals are cleared after a certain scroll (confirmed with the console.log output) but it still keeps giving me these warnings.

If there is a better way to do this i will gladly listen. I am trying to avoid checking for the non-stop scroll event, thus the intervals.

The purpose of this is to check if certain products on my webshop has been "seen", so I can send a datalayer to Google Tag Manager.

And like I previously said, the code works fine, it just keeps telling me these violations.. Did I not end the intervals correctly?

The suggested duplicate did not provade any solution 

var r1, r2, r3, r4, r5, r6, r7, r8;
var tabletRowHeight = [-1,450,980,1470,1950,2440,2980,3460];

if (window.innerWidth > 768  && window.innerWidth < 1200) {
  gtmImpressions2x(tabletRowHeight);
}

function gtmImpressions2x(rH) {
  var row1 = setInterval(function() {
    if (window.scrollY > rH[0]) {
      if (r1 != 1) {
        clearInterval(row1);
        console.log("Datalayer Row 1");
        r1 = 1;
      }
    }  
    var row2 = setInterval(function() {
      if (window.scrollY > rH[1]) {
        if (r2 != 1) {
          clearInterval(row2);
          console.log("Datalayer Row 2");
          r2 = 1;
        }
      }
      var row3 = setInterval(function() {
        if (window.scrollY > rH[2]) {
          if (r3 != 1) {
            clearInterval(row3);
            console.log("Datalayer Row 3");
            r3 = 1;
          }
        }
        var row4 = setInterval(function() {
          if (window.scrollY > rH[3]) {
            if (r4 != 1) {
              clearInterval(row4);
              console.log("Datalayer Row 4");
              r4 = 1;
            }
          }
          var row5 = setInterval(function() {
            if (window.scrollY > rH[4]) {
              if (r5 != 1) {
                clearInterval(row5);
                console.log("Datalayer Row 5");
                r5 = 1;
              }
            }
            var row6 = setInterval(function() {
              if (window.scrollY > rH[5]) {
                if (r6 != 1) {
                  clearInterval(row6);
                  console.log("Datalayer Row 6");
                  r6 = 1;
                }
              }
              var row7 = setInterval(function() {
                if (window.scrollY > rH[6]) {
                  if (r7 != 1) {
                    clearInterval(row7);
                    console.log("Datalayer Row 7");
                    r7 = 1;
                  }
                }
                var row8 = setInterval(function() {
                  if (window.scrollY > rH[7]) {
                    if (r8 != 1) {
                      clearInterval(row8);
                      console.log("Datalayer Row 8");
                      r8 = 1;
                    }
                  }
                }, 500);  
              }, 500);  
            }, 500);  
          }, 500);                      
        }, 500);            
      }, 500);
    }, 500);
  }, 500);
}
TryingToLearn
  • 13
  • 5
  • Have you looked into [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)? Would likely make this a lot cleaner. – pmkro Apr 09 '19 at 21:03
  • 1
    Possible duplicate of [javascript - chrome violation : \[Violation\] Handler took 83ms of runtime](https://stackoverflow.com/questions/42218699/javascript-chrome-violation-violation-handler-took-83ms-of-runtime) – Dom Apr 09 '19 at 21:04
  • What's the point of nesting so many intervals? If you really don't want to set a callback to window scroll event, you can set only one interval, which has `if...else if...` block inside it and it will work just fine without so many intervals. Also, since you're cleaning all of them after they are called, all of them are called only once so it's equivalent of not setting them at all - just run the code inside them. Besides, if `window.scrollY` is for example `3000` then all data layers 1-7 are gonna be sent, is that intentional? – Sebastian Kaczmarek Apr 10 '19 at 06:38
  • Hi Sebastian. The intervals are only cleared if a certain condition (window scroll > x) is met. The point is to first check if you scrolled past row 1, then start the check for row 2, and so on.. But now as I write this i notice that I have missplaced the endbrackets for the conditions. They next interval should only start IF the first intervals condition is met. And yes, if scrollY is 3000 then all should be sent (assuming that you started from scroll 0 and scrolled down to 3000). I will try a different approach on this without all the intervals but it would be nice to know whats wrong here. – TryingToLearn Apr 10 '19 at 11:03
  • To clarify: The current intervals keeps checking the scroll until you reach the target, then datalayer is sent and interval is cleared. (To stop the page from having non-stop intervals), but this can be achieved as you say, with one interval so I will probably change it. – TryingToLearn Apr 10 '19 at 11:05

0 Answers0