Question

我的html文件中有一个按钮。我希望每隔x帧或秒钟都有一个函数，我用鼠标将鼠标悬停在按钮上。我在这里用setInterval做了一些事情，但那可能是错的。在将鼠标悬停在按钮上之后，当前脚本将背景更改为红色一次，但就是这样。我希望它每隔x秒调用一次函数（从而改变背景）。

function switchfunction(){
    if(document.body.style.background == 'red'){
        document.body.style.background = 'green';
    }

    else{
        document.body.style.background = 'red';
    }
}
var btn3 = document.getElementById("trolololol")
btn3.addEventListener("mouseover", function(){
    setInterval(function() {
        bdy.style.backgroundImage = "url('')";
        switchfunction();
    }, 500);

Answer 1

处理此问题的一个好方法是使用setInterval()，onBlur和onHover。

首先......悬停：

var myHoverInterval = null;
var btn = document.getElementById("foo");

btn.addEventListener("mouseover", function() {
    if (myHoverInterval != null) {
        return;
    }
    myHoverInterval = setInterval(function() {
        console.log('Doing something');
    }, 1000);
});

开始执行代码。

第二......关于模糊：

btn.addEventListener("mouseout", function() {
    if (myHoverInterval != null) {
        clearInterval(myHoverInterval);
        myHoverInterval = null;
    }
});

停止间隔再次运行。

Answer 2

对于这样的情况，除了setInterval之外，还有其他选项。一个是requestAnimationFrame：https://mzl.la/1M5Be7I。如果这不能按你的意愿工作，可能是因为无法自定义呼叫之间的延迟，我建议使用级联超时而不是间隔。基本上，你会这样使用它：

let delay = 500, 
    timer = setTimeout(method, delay);
function method() {
  //.. do some thing here
  timer = setTimeout(method, delay)
}

当你需要取消时，你可以做到

clearTimeout(timer);

我赞成这一点，因为如果需要，您可以更改延迟而无需关闭间隔并开始新的延迟。

Answer 3

您应该存储setInterval()的结果，以避免一次出现多个间隔

＆＃13;

var btn = document.getElementById("foo");
var interval;

btn.addEventListener("mouseover", function() {
  if(!interval)
    interval = setInterval(switchfunction, 500);
});

function switchfunction() {
  if (document.body.style.background === 'red') {
    document.body.style.background = 'green';
  } else {
    document.body.style.background = 'red';
  }
}

＆＃13;

<button id="foo">Hover me!</button>

＆＃13;

Answer 4

我建议使用CSS来实现这一点，而不是在JavaScript中执行此操作，请参阅下面的代码段，了解如何执行此操作。

＆＃13;

.button:hover~.bg {
  background: red;
  animation: myfirst 1s;
  /* Firefox */
  -moz-animation: myfirst 1s infinite;
  /* Safari and Chrome */
  -webkit-animation: myfirst 1s infinite;
}


/* Firefox */

@-moz-keyframes myfirst {
  0% {
    background: red;
  }
  50% {
    background: green;
  }
  100% {
    background: red;
  }
}


/* Firefox */

@-webkit-keyframes myfirst {
  0% {
    background: red;
  }
  50% {
    background: green;
  }
  100% {
    background: red;
  }
}

.bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #EEE;
}

＆＃13;

<input type="submit" value="submit" class="button" />
<div class="bg"></div>

＆＃13;

但是，这需要您在页面上添加另一个元素。

Answer 5

你忘了关闭这个功能;这也需要删除。

document.body.style.backgroundImage="url('')";

我不知道你想用它做什么。现在，当您将鼠标悬停在按钮上时，背景颜色开始在两种不同颜色之间闪烁。您还可以注释绿色背景颜色并在背景颜色和背景图像之间切换。

function switchfunction(){
    if(document.body.style.background == 'red'){
        document.body.style.background = 'green';
      //document.body.style.backgroundImage = "url('http://i.imgur.com/FV5EnXhb.jpg')";
    }else{
        document.body.style.background = 'red';
    }
}
var btn3 = document.getElementById("trolololol");
btn3.addEventListener("mouseover", function(){
    setInterval(function() {       
        switchfunction();
    }, 500);
})

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div >
    <h1>TESTING</h1>
    <button id="trolololol">HOVER</button>
  </div> 
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

</body>
</html>

将鼠标悬停在按钮（html）上时继续调用js函数

5 个答案: