Question

当页面完成加载时，功能＆＃34; auto＆＃34;运行。我写了类似循环的东西，但效果很好，但我不知道如何阻止它（通过鼠标悬停事件）。 JS代码：

document.getElementById("a").addEventListener("mouseover", stop);
if (document.readyState === "complete") {
auto()
}

var d = document.getElementById("a");

function stop() {
    d.style.backgroundColor = "brown"; 
}

function auto() {
    setTimeout(function() {
        d.style.backgroundColor = "blue";

        if (d.style.backgroundColor === 'blue') {
            setTimeout(function() {
                d.style.backgroundColor = "yellow"; 

                if (d.style.backgroundColor === 'yellow') {
                    setTimeout(function() {
                        d.style.backgroundColor = "red";

                        if (d.style.backgroundColor === 'red') {
                            return auto();
                        }

                    }, 1000)
                }
            }, 1000)
        }
    }, 1000)

};

我正在寻找解决方案如何在鼠标悬停后停止换色（例如，当div颜色为红色时运行鼠标悬停事件，功能＆＃34;自动＆＃34;被禁用并保持在此位置）。在mouseout之后，＆＃34; auto＆＃34;功能应该继续＆＃34;工作＆＃34;。我正在考虑while循环和＆＃34;返回false＆＃34;内部。

https://jsfiddle.net/qaxu1py2/

Answer 1

如果您想要的只是一个<div>来改变颜色，但是当您将鼠标移到它上面时会停止，您甚至不需要JavaScript。您可以使用CSS Animations：

完成所有操作

.colorize {
  width: 64px;
  height: 64px;
  background-color: blue;
  animation: colorize 3s steps(1) infinite;
}

.colorize:hover {
  animation-play-state: paused;
}

@keyframes colorize {
  0% {
    background-color: blue;
  }
  33% {
    background-color: yellow;
  }
  66% {
    background-color: red;
  }
}

<div class="colorize"></div>

Answer 2

您可以将setTimeOut放在变量上并使用clearTimeOut()：

var timeOut;

function runTimeout(){
    timeOut = setTimeout(function(){  ..... }, 200);
}

function stopTimeout(){
   clearTimeout(timeOut );
}

或者像这样使用标志：

var isRunnig = false;

function runTimeout(){
     isRunnig = true;
     setTimeout(function(){
         if(isRunnig ){
           ....
         }
     },200);
}

function stopTimeout(){
   isRunnig = false;
}

Sources

Answer 3

您可以使用变量跟踪最新超时，然后使用clearTimeout取消超时：

var timeout;

document.getElementById("a").addEventListener("mouseover", stop);
if (document.readyState === "complete") {
    auto()
}

var d = document.getElementById("a");

function stop() {
    d.style.backgroundColor = "brown";
    clearTimeout(timeout);
}

function auto() {
    timeout = setTimeout(function() {
        d.style.backgroundColor = "blue";

        if (d.style.backgroundColor === 'blue') {
            timeout = setTimeout(function() {
                d.style.backgroundColor = "yellow"; 

                if (d.style.backgroundColor === 'yellow') {
                    timeout = setTimeout(function() {
                        d.style.backgroundColor = "red";

                        if (d.style.backgroundColor === 'red') {
                            return auto();
                        }

                    }, 1000)
                }
            }, 1000)
        }
    }, 1000)

};

如何暂停运行SetTimeOut函数？

3 个答案: