用于计算日期时间的JavaScript间隔函数
我有一个函数，它返回两个日期时间之间的剩余时间，当前如果我刷新，我会得到该特定日期的当前时间。目前它只返回正确的剩余时间，如果我刷新，我尝试创建一个setinterval函数，这样我就可以每隔几秒获取一次时间，但它不会每秒钟运行一次该函数。
到目前为止，我的代码：
import moment from 'moment';
const calc = {
vars: {
interval: null,
releaseDate: null,
currentDate: null
},
elements: {
releaseAt: document.getElementById('release-at'), // 2018-08-31 14:24:00
currentDate: document.getElementById('current-date') // 2018-08-18 17:32:59
},
render () {
moment().format();
this.nextTick();
this.vars.interval = setInterval(this.nextTick(), 1000);
},
nextTick () {
let releaseDate = moment(this.elements.releaseAt.value);
let currentDate = moment(this.elements.currentDate.value);
if (currentDate.isBefore(releaseDate)) {
currentDate.add(1, 'second');
const diff = releaseDate.diff(currentDate);
const diffDuration = moment.duration(diff);
const difference = +releaseDate - +currentDate;
return console.log(`
${diffDuration.months()} months
${diffDuration.days()} days
${diffDuration.hours()} hours
${diffDuration.minutes()} minutes
${diffDuration.seconds()} seconds left!`);
}
console.log('boom! End ticker');
return clearInterval(this.vars.interval);
}
};
calc.render();电流输出
0 months 12 days 20 hours 51 minutes 0 seconds left!
回答 1
Stack Overflow用户
发布于 2018-08-19 04:48:03
你写了这个：
setInterval(this.nextTick(), 1000); ...when你可能是这个意思：
setInterval(this.nextTick, 1000); 在第一个示例中，this.nextTick()在setInterval之前被计算，因此interval尝试处理nextTick()的返回值，而不是函数本身。如果nextTick()返回一个函数，这将非常有用，但在本例中，它返回一个没有返回值的clearInterval() --因此您最终每秒运行一次null。
在第二个示例中，函数本身就是将在间隔上运行的函数。这基本上是一种不那么冗长的写作方式：
setInterval(function() { this.nextTick() }, 1000)...but在这里也不能很好地工作，因为nextTick()依赖于保留相同的this；在一个纯函数调用中，this将恢复为Window对象而不是您的calc。保存this最简单的方法是使用胖箭头函数：
setInterval(()=>{this.nextTick()}, 1000);更新每个时间间隔的时间
同时，第二个不相关的问题是:您试图使用currentDate.add(1, 'second')在每个节拍上递增内部currentDate变量，但从未在任何地方分配新的值--而且每次都从(未修改的)输入字段重新填充该变量，这意味着您总是得到相同的结果。相反，您可以将新值写入到输入字段中，它将在下一个刻度中拾取：
this.elements.currentDate.value = currentDate.add(1, 'second');(或者，如果currentDate为空，则只能从表单域读取，否则只能依赖内部变量。或者更好的是，因为您要查找的是当前时间，所以跳过表单域和内部变量，只使用Date()。
通常，依赖一个事实来源是最安全的，而不是同时使用内部变量和DOM元素来保存相同的数据并使它们保持同步。)
工作示例：
const calc = {
vars: {
interval: null,
releaseDate: null,
currentDate: null
},
elements: {
releaseAt: document.getElementById('release-at'), // 2018-08-31 14:24:00
currentDate: document.getElementById('current-date') // 2018-08-18 17:32:59
},
render () {
moment().format();
this.nextTick();
this.vars.interval = setInterval(()=>{this.nextTick()}, 1000);
},
nextTick () {
let releaseDate = moment(this.elements.releaseAt.value);
let currentDate = moment(this.elements.currentDate.value);
if (currentDate.isBefore(releaseDate)) {
this.elements.currentDate.value = currentDate.add(1, 'second');
const diff = releaseDate.diff(currentDate);
const diffDuration = moment.duration(diff);
const difference = +releaseDate - +currentDate;
return console.log(`
${diffDuration.months()} months
${diffDuration.days()} days
${diffDuration.hours()} hours
${diffDuration.minutes()} minutes
${diffDuration.seconds()} seconds left!`);
}
console.log('boom! End ticker');
return clearInterval(this.vars.interval);
}
};
calc.render();<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<input id="release-at" value="2018-08-31 14:24:00">
<input id="current-date" value="2018-08-18 17:32:59">
https://stackoverflow.com/questions/51912251
复制相似问题