.each() 内的 setInterval 仅适用于最后一个间隔？

Question

目标：

\n

我使用 jQuery 的each 函数循环访问几个.event 元素。我正在使用来自每个 .event 类内隐藏的 span 元素的信息来计算计时器倒计时。我正在使用 setInterval() 每秒重新计算剩余时间。

\n

问题：

\n

我的所有计算都完美运行 \xe2\x80\x93 但仅适用于最后一个间隔。每个间隔似乎都会覆盖前一个间隔的计算。含义：只有最后一个 .event 才能获得输出。之前的所有 .event 甚至都没有得到任何输出。使用间隔之前和之后的日志，我能够将错误范围缩小到 setInterval 函数。如何防止每个间隔覆盖之前的间隔？或者我的错误是在我还没有想到的地方？

\n

代码：

\n

$('.event').each(function() {\n    $event = $(this);\n\n    // SET FUTURE DATE\n    $futureDate = $event.find($('.event-time'));\n    $countdownDate = new Date($futureDate.text()).getTime();\n\n    setInterval(function() {\n    \n        // SET TODAYS DATE\n        $now = new Date().getTime();\n    \n        // DIFFERENCE NOW AND FUTURE DATE\n        $diff = $countdownDate - $now;\n    \n        // TIME CALCULATIONS FOR d, h, m, s\n        $days = Math.floor($diff / (1000 * 60 * 60 * 24));\n        $hours = Math.floor(($diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n        $minutes = Math.floor(($diff % (1000 * 60 * 60)) / (1000 * 60));\n        $seconds = Math.floor(($diff % (1000 * 60)) / 1000);\n    \n        // OUTPUT\n        $event.find('.clock .val-d').html($days);\n        $event.find('.clock .val-h').html($hours);\n        $event.find('.clock .val-m').html($minutes);\n        $event.find('.clock .val-s').html($seconds);\n    \n    }, 1000)\n});\n

\n

Answer 1

问题是因为当你的间隔内的函数运行时循环已经完成，所以$event只会引用.eventjQuery 对象中的最后一个元素。

假设您可以使用 ES6，解决此问题的简单方法是使用关键字let来定义$event：

$('.event').each(function() {
  let $event = $(this);

  // the rest of your code...
});

如果你不能使用 ES6 那么你需要使用闭包来保留 的范围$(this)：

$('.event').each(function() {
  let $event = $(this);

  // the rest of your code...
});