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

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 >
  <div >
    USP 1
  </div>
  <div >
    USP 2
  </div>
  <div >
    USP 3
  </div>
  <div >
    USP 4
  </div>
</div>

CodePudding user response：

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 >
  <div >
    USP 1
  </div>
  <div >
    USP 2
  </div>
  <div >
    USP 3
  </div>
  <div >
    USP 4
  </div>
</div>

CodePudding user response：

You clear the interval everytime after call setinterval immediately.

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

The code equals to:

$(window).on("resize", function (e) {
  // ...
  intervalId = setInterval(function () {
    // ...
  }, 3000);
  clearInterval(intervalId)
});

setInterval put a task into the event loop, then the clearInterval cancel the task. So nothing would happened.

I modify the checkScreenSize function as below. Notice, if you don't add a clearInterval call before the setInterval, there will be a lots of interval timer.

function checkScreenSize() {
  var newWindowWidth = $(window).width();
  if (newWindowWidth < 768) {
    const divs = [...document.querySelectorAll(".tagline2")];
    divs.i = 0;
    // clearInterval each time before add a new interval
    clearInterval(intervalId);
    intervalId = setInterval(function () {
      divs[divs.i  ].classList.remove("move");
      divs[divs.i = divs.i % divs.length].classList.add("move")
    }, 3000);
  } else {
    clearInterval(intervalId);
  }
}