如何在鼠标悬停时暂停间隔并在鼠标不再悬停时恢复答案

【问题标题】：How to pause interval on mouseover and resume when the mouse is no longer over如何在鼠标悬停时暂停间隔并在鼠标不再悬停时恢复
【发布时间】：2019-11-11 13:22:16
【问题描述】：

我创建了一个页面，其中 div 的背景颜色会经常变化。我想这样做，以便当鼠标悬停（或悬停）时，只要鼠标悬停在那里，换色器就会暂停。当鼠标不再悬停在 div 上时，颜色会继续从它停止的地方改变。我在这个网站上遇到的最接近的例子使用了 JQuery 解决方案。我不是在寻找 JQuery 解决方案。我正在寻找一个 javascript 解决方案。我感谢您的所有回复。谢谢！

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>

【问题讨论】：

如果对你有帮助请标记答案
您可以将区间包装在一个对象中，请参阅stackoverflow.com/questions/24724852/… 或stackoverflow.com/… 以获得更多类似结果。

标签： javascript setinterval

【解决方案1】：

没有办法暂停计时器，但您可以停止当前正在运行的计时器，然后启动一个新计时器。

（仅供参考：所有 5 年以内的浏览器至少支持 CSS 过渡。无需供应商前缀。）

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>

【讨论】：

【解决方案2】：

您可以完全在 CSS 中执行此操作，但您需要使用动画。我还添加了一些 CSS 变量，以便动画更容易更改。

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 关键帧和动画得到了广泛的支持，并且已经存在多年。此时无需为它们添加前缀。
感谢您的回复。以后我一定会试试的。

【解决方案3】：

虽然这并没有真正打破间隔，但它非常接近地模仿了你需要的东西.. 您可以使用标志.. 像这样：

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

来自Javascript - Pausing setInterval()

【讨论】：

当 OP 使用 vanilla JS 并且 vanilla JS 版本较短时，为什么要使用 jQuery？
另外，OP 要求鼠标进入/离开激活。不点击激活
如果您坚持这一点，这将是一个非常好的答案。我建议您编辑答案以仅使用 javascript 并使用正确的事件。