Question

我的任务：

当我悬停当前块时运行setInterval循环，例如#main
当我将鼠标悬停在#main的某些子元素上时，setInterval必须暂停
当我离开#main的子元素，并将鼠标焦点返回到#main时，setTimeOut应该再次运行。这是屏幕http://joxi.ru/L215V3qh65weW2

我的代码：

let num = 0;
var timer = function() { // auto click
    { num >= $(`.the_wrap_graf`).children().length-1 ? num = 0 : num++ }
    $(`.year-wrap:eq(${num}) .q`).click()
}

var timerID = null // name of interval

$('.the_wrap_feed').hover(function (ev) { // hover run loop #main
    timerID = setInterval(timer, 3000);
}, function (ev) { // mouseleave kill loop
    clearInterval(timerID)
})

$(`.q`).mouseenter(function(e) { // kill loop when hover square
    clearInterval(timerID)
})

如果我将回调添加到$（.q），它就会崩溃。我该怎么办？

Answer 1

您无法暂停间隔计时器。你只能取消它并开始一个新的。

重新要求，我想我可能会使用mouseenter和mouseleave（您已经在使用hover进行了操作）并跟踪光标是否为在#main或孩子：

＆＃13;

var timer = 0;
var timerValue = 0;
var inMain = 0;
var inChild = 0;

function showTimer() {
  $("#timer").text(
    timer ? "Running: " + timerValue : "Not running"
  );
}

function updateTimer() {
  if (inMain && !inChild) {
    if (!timer) {
      timer = setInterval(tick, 100);
    }
  } else {
    if (timer) {
      clearInterval(timer);
      timer = 0;
    }
  }
}

function tick() {
  ++timerValue;
  showTimer();
}

showTimer();

$("#main")
  .hover(
    function() {
      ++inMain;
      updateTimer();
    },
    function() {
    --inMain;
    updateTimer();
    }
  );
$("#main .child")
  .hover(
    function() {
      ++inChild;
      updateTimer();
    },
    function() {
      --inChild;
      updateTimer();
    }
  );

＆＃13;

#main {
  border: 1px solid #aaa;
  padding: 8px;
}
.child {
  border: 1px solid #ddd;
  margin: 8px;
}

＆＃13;

<div id="timer"></div>
<div>
  Not in main
  <div id="main">
    In main, not in any children
    <div class="child">one child</div>
    <div class="child">another child</div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

＆＃13;

如何运行暂停和停止setInterval

1 个答案: