Question

我有一个滑块错误通知，滑出，显示错误并在10秒内消失。如果单击它，可以提前删除它。在缺少的东西是停止它鼠标悬停消失。

对于某些人来说，10秒还不足以读取错误。所以我需要用鼠标悬停来停止计时器。

总结一下：如果你不与之互动，我希望它能在10秒内消失。如果我将鼠标悬停在它上面，应该停止计时器，并且消息应该保留在那里直到你点击它去除。

如何在悬停时停止计时器（setTimeout功能）？

这是消息滑块功能：

function popa(text = "Internal Error!", type = "error") {
  var alert = document.createElement("div");
  var stack = document.querySelectorAll('.alert').length;
  alert.appendChild(document.createTextNode(`${stack + 1}:  ${text}`));
  alert.classList.add("alert");
  alert.classList.add(`alert-${type}`);
  document.querySelector("body").appendChild(alert);
  var steps = 20;
  var width = parseInt(getComputedStyle(alert).getPropertyValue('width'));
  var slide = width + Math.round(width / 4);
  var step = Math.round(slide / steps);
  alert.onclick = () => {
    alert.parentNode.removeChild(alert);
  };
  (function next(cnt, max) {
    if (cnt++ > max) {
      return;
    }
    alert.style.right = `${(-width) + (step * cnt)}px`;
    setTimeout(() => {
      next(cnt, max);
    }, 10);
  })(0, steps);
  console.log(text);
  setTimeout(() => {
    if (alert.parentNode) {
      alert.parentNode.removeChild(alert);
    }
  }, 10000);
}

谢谢。

P.S。请不要jQuery

Answer 1

window.setTimeout()返回一个整数timerID，您可以将其与window.clearTimeout()：

一起使用

var notificationTimer;

function createTimer() {
  notificationTimer = setTimeout(function(){ alert('hi'); }, 10000);
}

function clearTimer() {
  clearTimeout(notificationTimer);
}

另请参阅：https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout

悬停时停止通知超时

1 个答案: