How to pause interval on mouseover and resume when the mouse is no longer over

Question

I created a page where the background colors of a div change every so often. I want to make it so that when the mouse is over(or hovers) the color changer pauses where it is, as long as the mouse hovers there. And when the mouse no longer hovers the div, the colors continue to change where it left off. The closest examples I ran into on this website used JQuery solutions. I am not looking for a JQuery solution. I am looking for a javascript solution. I appreciate any and all of your responses. Thank You!

var dammit = document.getElementById("muck");
var colorChange = document.getElementById("color-changer");
var colors = ["red", "blue", "green", "pink"];
var counter = 0;

function changer() {
  if (counter >= colors.length) {
    counter = 0;
  };

  colorChange.style.background = colors[counter];
  counter++;

};

var myTimer = setInterval(changer, 3000);

body {
  background: #FDCA40;
  margin: 0;
  padding: 0;
  -webkit-transition: background 0.9s;
  -moz-transition: background 0.9s;
  transition: background 0.9s;
}

div#muck {
  width: 100%;
  height: 100vh;
}

<body id="color-changer">
  <div id="muck"></div>
</body>

You can wrap the interval in an object, see https://stackoverflow.com/questions/24724852/pause-and-resume-setinterval , or https://stackoverflow.com/search?q=%5Bjavascript%5Dpause+and+resume+setInterval for more similar results. — Teemu, Nov 11 '19 at 13:27

score 5 · Accepted Answer · answered Nov 11 '19 at 13:28

There is no way to pause a timer, but you can just stop the currently running one and then start a new one.

(FYI: All browsers that are within 5 years old at least support CSS transitions. No need to vendor prefix that.)

var source = document.getElementById("muck");
var colorChange = document.getElementById("color-changer");
var colors = ["red", "blue", "green", "pink"];
var counter = 0;

function changer(){
  if (counter >= colors.length){
    counter = 0;
    };

  colorChange.style.background = colors[counter];
  counter++;

};

var myTimer = setInterval(changer, 1000);

// Stop the current timer when mouseover
source.addEventListener("mouseover", function(){ clearInterval(myTimer)});

// Start a new timer when mouse out
source.addEventListener("mouseout", function(){ myTimer = setInterval(changer, 1000);});

body{
  background: #FDCA40;
  margin: 0;
  padding: 0;
  transition: background 0.9s;
}

div#muck{
  width: 100%;
  height: 100vh;
}

<body id="color-changer">
  <div id="muck"></div>
</body>

score 3 · Answer 2 · answered Nov 11 '19 at 14:37

You can do this purely in CSS but you need to use animation. I also added some CSS variables so the animation is easier to change.

body {
  background: #FDCA40;
  margin: 0;
  padding: 0;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

@keyframes example {
  0%   {background-color: red;}
  20%  {background-color: blue;}
  40%  {background-color: green;}
  80%  {background-color: pink;}
  100% {background-color: red;}
}

div#muck {
  --animation-transition-speed: 0.9s;
  --number-of-colors: 4;

  width: 100%;
  height: 100vh;

  -webkit-animation-name: example;
  -webkit-animation-duration: calc(var(--animation-transition-speed) * var(--number-of-colors));
  animation-name: example;
  animation-duration: calc(var(--animation-transition-speed) * var(--number-of-colors));
  animation-iteration-count: infinite;
}

 div#muck:hover {
    animation-play-state: paused;
 }

<body id="color-changer">
  <div id="muck"></div>
</body>

CSS Keyframes and Animation is widely supported and has been for years. No real need to vendor-prefix them at this point. — Scott Marcus, Nov 11 '19 at 15:59
Thank you for your response. I will definitely try this in the future. — Will, Nov 11 '19 at 21:39

Smail Galijasevic · Answer 3 · 2019-11-11T14:33:22.197

-1

While this doesnt really pouse the interval it mimics what you need very closely.. You can use a flag.. something like this:

    var output = document.getElementById('id')
        var isPaused = false;
        var counter = 0;
        window.setInterval(function() {
        if(!isPaused) {
            counter++;
          if (counter >= colors.length) {
            counter = 0;
           };
           colorChange.style.background = colors[counter];
          }
        }, 1000);


        document.getElementById('muck').addEventListener('mouseenter', function(e) {
          isPaused = true;
        });

        document.getElementById('muck').addEvenetListener('mouseleave', function(e) {
          isPaused = false;
        });

from Javascript - Pausing setInterval()

edited Nov 11 '19 at 14:33

answered Nov 11 '19 at 13:25

Smail Galijasevic

773
4
16

2

Why use jQuery when the OP is using vanilla JS and the vanilla JS version is shorter? – gabriel.hayes Nov 11 '19 at 13:32
1

Also, the OP asked for mouse enter/leave activation. Not click activation – gabriel.hayes Nov 11 '19 at 13:33
This would've been a perfectly good answer if you sticked to the point. I suggest you edit the answer to use only javascript and to use the right events. – ibrahim mahrir Nov 11 '19 at 13:42

How to pause interval on mouseover and resume when the mouse is no longer over

3 Answers3