setInterval不使用onmouseover

Question

我正在使用Luxon来获取一些不同的时区信息。

当鼠标在内容div上结束时，它必须显示一个城市的当前时间，当称为“笨拙”时，请再次显示城市的名字。

但是以某种方式SetInterval与Onmouseover功能不起作用，只是与停止的时间信息保持在一起。

我要制作的是实时时钟，当我在每个城市名称上鼠标鼠标时可以运行。我该如何使其工作？

代码样本：

const one = document.querySelector(".div1 div div");
const timezone = one.getAttribute("data-timezone");
const now = luxon.DateTime.now().setZone(timezone);
const city = one.getAttribute("data-city");

const time = setInterval(updateTimes(), 1000);

function updateTimes() {
  one.onmouseover = function() {
    one.innerHTML = now.toFormat("LLL dd HH:mm:ss");
  };
}

const stoptime = clearInterval(stopTimes(), 1000);

function stopTimes() {
  one.onmouseout = function() {
    one.innerHTML = city;
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.3.2/luxon.min.js"></script>
<div class="div1 content">
  <div class="wrap">
    <div data-city="New York" data-timezone="America/New_Yrok">New York</div>
  </div>
</div>

Answer 1

这将在执行后调用updateTimes，并将其返回的内容设置为其回调函数。

const time = setInterval(updateTimes(), 1000);

这是第一个错误。您想这样传递它：

const time = setInterval(updateTimes, 1000);

因此，您不会执行功能并传递返回的功能，而要传递函数本身。

clear Interval不使用函数，而是间隔ID。 setInterval返回该ID，因此要清除您必须保存间隔ID的间隔并将其用作第一个参数，

const time = setInterval(updateTimes, 1000);
clearInterval(time);

也只有一个输入参数。

但是您不想立即清除间隔，因为它根本不会被调用。

因此，让我们看一下UpdateTimes功能，看看它的作用。它为Mouseover事件设置了一个新事件侦听器。这应该起作用，但是您应该尝试将逻辑保留在事件侦听器中。

这是我的解决方案：

const one = document.querySelector(".div1 div div");
const timezone = one.getAttribute("data-timezone");
let now = luxon.DateTime.now().setZone(timezone);
const city = one.getAttribute("data-city");

let interval = null;
// we set the interval here if it is already set we clear the previous interval
// mouseenter is only called once when we enter mouseover gets called everytime we move our mouse and it is inside the element
one.addEventListener("mouseenter", () => {
  if (interval) clearInterval(interval);
  // we save the interval id to clear it later
  interval = setInterval(() => {
    // Here we update the time and text
    now = luxon.DateTime.now().setZone(timezone);
    one.innerHTML = now.toFormat("LLL dd HH:mm:ss");
  }, 1000);
  // we do it again once so we don't have to wait for one second the first time
  now = luxon.DateTime.now().setZone(timezone);
  one.innerHTML = now.toFormat("LLL dd HH:mm:ss");
});
// Here we clear the interval
// mouseleave so we only ever clear when the mouse moves out of the element
one.addEventListener("mouseleave", () => {
  // when we leave and the inteval is set we clear it
  if (interval) {
    clearInterval(interval);
    interval = null;
  }
  // and reset the text
  one.innerHTML = city;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.3.2/luxon.min.js"></script>
<div class="div1 content">
  <div class="wrap">
    <!-- There was a typo in data-timezone="America/New_Yrok" -->
    <div data-city="New York" data-timezone="America/New_York">New York</div>
  </div>
</div>