How to clear setinterval() when resizing and inside condition Using Jquery

I’, trying to run this functin only on mobile devices which is less than 768px , it works on this screen width but it also ignore the condition and works on larger screens than 768px, i tried to clear interval but there is something wrong with my code

  $(document).ready(function () {
 $(window).on("resize", function (e) {
                   checkScreenSize();
                   clearInterval(intervalId)
               });

               checkScreenSize();

               function checkScreenSize() {
                   var newWindowWidth = $(window).width();
                   if (newWindowWidth < 768) {
                       const divs = [...document.querySelectorAll(".tagline2")];
                       
                       divs.i = 0;
                       intervalId = setInterval(function () {
                           divs[divs.i++].classList.remove("move");
                           divs[divs.i = divs.i % divs.length].classList.add("move")
                       }, 3000);

                   }
                  
               }
           });

.move {background-color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="infobarContainer">
  <div class="tagline tagline2 move">
    USP 1
  </div>
  <div class="tagline tagline2">
    USP 2
  </div>
  <div class="tagline tagline2">
    USP 3
  </div>
  <div class="tagline tagline2">
    USP 4
  </div>
</div>

Answer

Based on your code I moved things around to factor behaviours in functions. So now you have the functions startAnimation and stopAnimation that will be triggered by the resize event handler based on conditions.

But the key was also keeping track of the fact the animation was running or not.

So when you resize the window and the size goes < 768px (and the animation is not already running) triggers the beginnning of the animation.

When you keep resizing the window, the animation will not trigger again if it’s running already. But if the width goes >= 768px the animation will stop and will be ready to restart as soon as the window width will go lower than the condition.

isAnimationRunning = false;
intervalId = undefined;

$(document).ready(function () {

  $(window).on("resize", function (e) {
    checkScreenSize();   
  });

  checkScreenSize();

  function checkScreenSize() {       
    var newWindowWidth = $(window).width();
    if (newWindowWidth < 768 && !isAnimationRunning) {
      runAnimation();
    }else{
      stopAnimation();
    }
  }
  
  function stopAnimation(){
    isAnimationRunning = false;
    clearInterval(intervalId);
  }
  
  function runAnimation(){
    isAnimationRunning = true;
    const divs = [...document.querySelectorAll(".tagline2")];
    divs.i = 0;
    intervalId = setInterval(function () {
      divs[divs.i++].classList.remove("move");
      divs[divs.i = divs.i % divs.length].classList.add("move")
    }, 200);
    return intervalId;
  }
});

.move {background-color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="infobarContainer">
  <div class="tagline tagline2 move">
    USP 1
  </div>
  <div class="tagline tagline2">
    USP 2
  </div>
  <div class="tagline tagline2">
    USP 3
  </div>
  <div class="tagline tagline2">
    USP 4
  </div>
</div>