本教程旨在解决javascript中定时比较两个日期变量时遇到的常见问题。文章将解释为何在`setinterval`中静态日期变量不更新会导致条件永不满足，并提供一个修正后的代码示例，演示如何正确地在每次检查时更新当前时间变量，从而确保日期比较逻辑能够按预期工作并触发相应的函数。
在javaScript开发中，我们经常需要实现定时任务，例如每隔一段时间检查某个条件是否满足。当这个条件涉及到时间比较时，一个常见的陷阱是未能正确地更新用于比较的“当前时间”变量。本文将深入探讨这一问题，并提供一个健壮的解决方案。
理解问题：静态日期变量的陷阱
考虑一个场景：你需要每分钟比较一个当前时间变量和一个预设的结束时间变量，当当前时间达到或超过结束时间时，触发一个特定函数。初学者可能会像以下代码示例那样实现：
var current = new date(Date.now()); // 在外部初始化当前时间 var endtime = new Date(Date.now() + 2 * 60 * 1000); // 结束时间，比当前时间晚2分钟 // 格式化并显示结束时间，这部分与核心问题无关 var hours = ('0' + endtime.getHours()).slice(-2); var mins = ('0' + endtime.getMinutes()).slice(-2); var secs = ('0' + endtime.getSeconds()).slice(-2); var gametime = hours + ":" + mins + ":" + secs; $('#endtime').html(gametime); // 每分钟调用一次myFunction var i = setInterval(function () { myFunction(); }, 60000); function myFunction() { // 这里的current始终是初始化时的那个时间 if (new Date(current) > new Date(endtime)) { doing(); } } function doing() { // 触发的函数，例如闪烁效果和弹窗 var body = $('#alert'); var colors = ['white', 'transparent']; var currentIndex = 0; setInterval(function () { light(); }, 400); function light() { body.css({ backgroundColor: colors[currentIndex] }); if (!colors[currentIndex]) { currentIndex = 0; } else { currentIndex++; } } alert("Time's up!"); clearInterval(i); // 停止主定时器 }
上述代码的问题在于，current变量在setInterval外部被初始化后，其值就固定不变了。这意味着在myFunction每次执行时，current始终是脚本启动那一刻的时间。而endtime也是一个固定值。因此，if (new Date(current) > new Date(endtime))这个条件在current不更新的情况下，将永远为false（除非current初始化时就大于endtime，但这不符合我们的逻辑意图），导致doing()函数永远不会被调用。
解决方案：动态更新当前时间
要解决这个问题，关键在于确保在每次进行时间比较时，current变量都反映的是“当前”的实时时间。这可以通过在setInterval的回调函数内部重新获取当前时间并更新current变量来实现。
立即学习“Java免费学习笔记（深入）”；
以下是修正后的myFunction：
function myFunction() { // 每次执行时都更新current为当前的实时时间 current = new Date(Date.now()); // 关键修正点 if (current > endtime) { // 直接比较Date对象 doing(); } }
通过将current = new Date(Date.now());这一行代码移入myFunction内部，current变量在每次定时器触发时都会被赋予最新的时间戳，从而使得current > endtime的比较能够正确地评估实时情况。
完整的修正代码示例
将上述修正应用到原始代码中，得到一个功能正确的实现：
<!DOCTYPE html> <html> <head> <title>定时日期比较示例</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> body { font-family: Arial, sans-serif; margin: 20px; } #endtime-display { font-size: 1.2em; margin-bottom: 10px; } #alert { width: 100px; height: 50px; border: 1px solid #ccc; text-align: center; line-height: 50px; margin-top: 20px; } </style> </head> <body> <h1>javascript定时日期比较</h1> <p>当前时间与结束时间比较示例。</p> <div id="endtime-display">结束时间: <span id="endtime"></span></div> <div id="alert"></div> <script> // 结束时间，比脚本启动时晚2分钟 var endtime = new Date(Date.now() + 2 * 60 * 1000); // 格式化并显示结束时间 var hours = ('0' + endtime.getHours()).slice(-2); var mins = ('0' + endtime.getMinutes()).slice(-2); var secs = ('0' + endtime.getSeconds()).slice(-2); var gametimeFormatted = hours + ":" + mins + ":" + secs; $('#endtime').html(gametimeFormatted); // 初始化current变量，但其值会在myFunction中动态更新 var current; // 每分钟调用一次myFunction var i = setInterval(function () { myFunction(); }, 60000); console.log("定时器已启动，每分钟检查一次。"); function myFunction() { // 每次执行时都更新current为当前的实时时间 current = new Date(Date.now()); console.log("当前时间:", current.toLocaleTimeString(), "| 结束时间:", endtime.toLocaleTimeString()); // 直接比较Date对象即可，无需再次new Date() if (current >= endtime) { console.log("当前时间已达到或超过结束时间，触发doing()。"); doing(); } else { console.log("当前时间未达到结束时间。"); } } function doing() { var body = $('#alert'); var colors = ['white', 'transparent']; var currentIndex = 0; // 启动一个内部定时器，用于闪烁效果 var flashInterval = setInterval(function () { light(); }, 400); function light() { body.css({ backgroundColor: colors[currentIndex] }); currentIndex = (currentIndex + 1) % colors.length; // 循环切换颜色 } alert("时间到！"); clearInterval(i); // 停止主定时器 clearInterval(flashInterval); // 停止闪烁定时器，避免内存泄漏 body.css({ backgroundColor: 'white' }); // 确保最终背景色为白色 console.log("主定时器已停止。"); } </script> </body> </html>
在上述代码中，我们移除了new Date(current)和new Date(endtime)的冗余创建，因为current和endtime本身已经是Date对象，可以直接进行比较。
注意事项与最佳实践
- 动态更新时间变量： 核心原则是在需要进行最新时间比较的时刻（例如setInterval的回调中），重新获取当前时间。
- 直接比较Date对象或时间戳： JavaScript的Date对象可以直接进行比较（例如date1 > date2），它会隐式地将其转换为时间戳进行比较。或者，您也可以显式地使用getTime()方法获取时间戳（以毫秒为单位），然后比较这些数字，这在某些情况下可能更直观或性能略优。例如：if (current.getTime() >= endtime.getTime())。
- setInterval的精度： setInterval并不保证绝对精确的执行时间。它只是在指定延迟后将回调函数添加到事件队列中。如果事件队列繁忙，回调可能会稍有延迟执行。对于大多数分钟级别的比较，这种延迟通常可以忽略不计。
- 清除定时器： 当定时任务不再需要时，务必使用clearInterval()来停止它，以避免不必要的资源消耗和潜在的内存泄漏。在上述doing()函数中，我们不仅清除了主定时器i，也清除了用于闪烁效果的内部定时器flashInterval。
- 变量作用域： 确保current和endtime变量在myFunction内部是可访问的。在本例中，它们作为全局变量（或在同一作用域内）定义，因此没有问题。
总结
在JavaScript中实现定时日期比较并触发事件时，关键在于理解Date对象的生命周期和变量作用域。避免将“当前时间”变量静态化，而应在每次比较时动态地更新它。通过在setInterval回调中重新获取Date.now()并创建新的Date对象，我们可以确保比较逻辑的准确性，从而使定时任务按预期执行。同时，遵循清除定时器等最佳实践，能够构建出更健壮、高效的应用程序。