我正在编写一些Javascript，它与我不拥有的库代码交互，并且不能（合理地）改变。它创建了Javascript超时，用于在一系列限时问题中显示下一个问题。这不是真正的代码，因为它超出了所有希望。这是图书馆正在做的事情：
....
// setup a timeout to go to the next question based on user-supplied time
var t = questionTime * 1000
test.currentTimeout = setTimeout( showNextQuestion(questions[i+1]), t );
我想通过询问由questionTime * 1000创建的计时器在屏幕上放置一个填充setTimeout的进度条。唯一的问题是，似乎没有办法做到这一点。我缺少getTimeout函数吗？我可以找到的有关Javascript超时的唯一信息仅与通过setTimeout( function, time)创建和通过clearTimeout( id )删除有关。
我正在寻找一个函数，它返回超时触发前的剩余时间，或者调用超时后经过的时间。我的进度条形码如下所示：
var timeleft = getTimeout( test.currentTimeout ); // I don't know how to do this
var $bar = $('.control .bar');
while ( timeleft > 1 ) {
$bar.width(timeleft / test.defaultQuestionTime * 1000);
}
tl; dr：如何在javascript setTimeout（）之前找到剩余时间？
这是我现在使用的解决方案。我浏览了负责测试的图书馆部分，并解密了代码（可怕的，并且违反了我的权限）。
// setup a timeout to go to the next question based on user-supplied time
var t = questionTime * 1000
test.currentTimeout = mySetTimeout( showNextQuestion(questions[i+1]), t );
这是我的代码：
// wrapper for setTimeout
function mySetTimeout( func, timeout ) {
timeouts[ n = setTimeout( func, timeout ) ] = {
start: new Date().getTime(),
end: new Date().getTime() + timeout
t: timeout
}
return n;
}
这在任何不是IE 6的浏览器中都可以正常使用。即使是最初的iPhone，我也希望它能够异步。
答案 0 :(得分：50)
只是为了记录，有一种方法可以在node.js中留下时间：
var timeout = setTimeout(function() {}, 3600 * 1000);
setInterval(function() {
console.log('Time left: '+getTimeLeft(timeout)+'s');
}, 2000);
function getTimeLeft(timeout) {
return Math.ceil((timeout._idleStart + timeout._idleTimeout - Date.now()) / 1000);
}
打印：
$ node test.js
Time left: 3599s
Time left: 3597s
Time left: 3595s
Time left: 3593s
这似乎不适用于firefox，但由于node.js是javascript，我认为这句话可能对寻找节点解决方案的人有所帮助。
答案 1 :(得分：46)
编辑：我实际上认为我做得更好：https://stackoverflow.com/a/36389263/2378102
我写了这个函数并且我经常使用它：
function timer(callback, delay) {
var id, started, remaining = delay, running
this.start = function() {
running = true
started = new Date()
id = setTimeout(callback, remaining)
}
this.pause = function() {
running = false
clearTimeout(id)
remaining -= new Date() - started
}
this.getTimeLeft = function() {
if (running) {
this.pause()
this.start()
}
return remaining
}
this.getStateRunning = function() {
return running
}
this.start()
}
制作计时器：
a = new timer(function() {
// What ever
}, 3000)
所以如果你想要剩下的时间就这样做：
a.getTimeLeft()
答案 2 :(得分：25)
如果您无法修改库代码，则需要重新定义setTimeout以适合您的目的。以下是您可以做的一个示例：
(function () {
var nativeSetTimeout = window.setTimeout;
window.bindTimeout = function (listener, interval) {
function setTimeout(code, delay) {
var elapsed = 0,
h;
h = window.setInterval(function () {
elapsed += interval;
if (elapsed < delay) {
listener(delay - elapsed);
} else {
window.clearInterval(h);
}
}, interval);
return nativeSetTimeout(code, delay);
}
window.setTimeout = setTimeout;
setTimeout._native = nativeSetTimeout;
};
}());
window.bindTimeout(function (t) {console.log(t + "ms remaining");}, 100);
window.setTimeout(function () {console.log("All done.");}, 1000);
这不是生产代码，但应该让您走上正轨。请注意，每个超时只能绑定一个侦听器。我没有对此进行过广泛的测试，但它适用于Firebug。
更强大的解决方案将使用相同的包装setTimeout技术，而是使用从返回的timeoutId到侦听器的映射来处理每个超时的多个侦听器。您还可以考虑包装clearTimeout，以便在清除超时时分离侦听器。
答案 3 :(得分：3)
Javascript的事件堆栈不按您的想法操作。
创建超时事件时，会将其添加到事件队列中，但在触发该事件时，其他事件可能会优先，延迟执行时间并推迟运行时。
示例： 您创建一个延迟10秒的超时，以向屏幕发出警告。它将被添加到事件堆栈中，并将在所有当前事件被触发后执行（导致一些延迟）。然后，当处理超时时，浏览器仍然继续捕获将其添加到堆栈的其他事件，这导致处理的进一步延迟。如果用户点击或进行了大量的ctrl +输入，则他们的事件优先于当前堆栈。你的10秒可以变成15秒或更长时间。
话虽如此，有很多方法可以假装已经过了多少时间。一种方法是在将setTimeout添加到堆栈后立即执行setInterval。
示例： 执行具有10秒延迟的settimeout（将该延迟存储在全局中）。然后执行每秒运行一次的setInterval，从延迟中减去1并输出剩余的延迟。由于事件堆栈如何影响实际时间（如上所述），这仍然不准确，但确实可以计算。
简而言之，没有真正的方法可以获得剩余的时间。只有方法可以尝试向用户传达估算值。
答案 4 :(得分：3)
这可能是一种更好的方法，而且，您不需要更改已编写的代码：
var getTimeout = (function() { // IIFE
var _setTimeout = setTimeout, // Reference to the original setTimeout
map = {}; // Map of all timeouts with their start date and delay
setTimeout = function(callback, delay) { // Modify setTimeout
var id = _setTimeout(callback, delay); // Run the original, and store the id
map[id] = [Date.now(), delay]; // Store the start date and delay
return id; // Return the id
};
return function(id) { // The actual getTimeLeft function
var m = map[id]; // Find the timeout in map
// If there was no timeout with that id, return NaN, otherwise, return the time left clamped to 0
return m ? Math.max(m[1] - Date.now() + m[0], 0) : NaN;
}
})();
......最终模仿：
var getTimeout=function(){var e=setTimeout,b={};setTimeout=function(a,c){var d=e(a,c);b[d]=[Date.now(),c];return d};return function(a){return(a=b[a])?Math.max(a[1]-Date.now()+a[0],0):NaN}}();
答案 5 :(得分：2)
特定于服务器端Node.js
以上所有内容都不适合我，在检查了超时对象之后，看来一切都与流程开始的时间有关。以下对我有用：
myTimer = setTimeout(function a(){console.log('Timer executed')},15000);
function getTimeLeft(timeout){
console.log(Math.ceil((timeout._idleStart + timeout._idleTimeout)/1000 - process.uptime()));
}
setInterval(getTimeLeft,1000,myTimer);
输出：
14
...
3
2
1
Timer executed
-0
-1
...
node -v
v9.11.1
为简洁起见，编辑了输出，但是此基本功能给出了从执行到执行或从执行到执行的大概时间。就像其他人提到的那样，由于节点处理的方式，这些都不是准确的，但是如果我想抑制运行时间不到1分钟的请求，并且我存储了计时器，我不明白为什么这样做不会快速检查工作。在10.2以上版本中使用refreshtimer处理对象可能很有趣。
答案 6 :(得分：0)
不，但您可以在函数中拥有自己的setTimeout / setInterval用于动画。
说你的问题如下：
function myQuestion() {
// animate the progress bar for 1 sec
animate( "progressbar", 1000 );
// do the question stuff
// ...
}
您的动画将由这两个功能处理：
function interpolate( start, end, pos ) {
return start + ( pos * (end - start) );
}
function animate( dom, interval, delay ) {
interval = interval || 1000;
delay = delay || 10;
var start = Number(new Date());
if ( typeof dom === "string" ) {
dom = document.getElementById( dom );
}
function step() {
var now = Number(new Date()),
elapsed = now - start,
pos = elapsed / interval,
value = ~~interpolate( 0, 500, pos ); // 0-500px (progress bar)
dom.style.width = value + "px";
if ( elapsed < interval )
setTimeout( step, delay );
}
setTimeout( step, delay );
}
答案 7 :(得分：0)
如果有人回头看这个。我已经推出了一个超时和间隔管理器，它可以让你在超时或间隔时间内剩余时间以及做其他一些事情。我将添加它以使其更加漂亮和更准确，但它似乎工作得相当好（虽然我有一些更多的想法，使它更准确）：
答案 8 :(得分：0)
问题已经得到解答，但我会补充一点。它只是发生在我身上。
在setTimeout中使用recursion，如下所示：
var count = -1;
function beginTimer()
{
console.log("Counting 20 seconds");
count++;
if(count <20)
{
console.log(20-count+"seconds left");
setTimeout(beginTimer,2000);
}
else
{
endTimer();
}
}
function endTimer()
{
console.log("Time is finished");
}
我猜代码是自解释的
答案 9 :(得分：0)
检查一下：
class Timer {
constructor(fun,delay) {
this.timer=setTimeout(fun, delay)
this.stamp=new Date()
}
get(){return ((this.timer._idleTimeout - (new Date-this.stamp))/1000) }
clear(){return (this.stamp=null, clearTimeout(this.timer))}
}
制作计时器：
let smtg = new Timer(()=>{do()}, 3000})
留下来：
smth.get()
清除超时
smth.clear()
答案 10 :(得分：0)
(function(){
window.activeCountdowns = [];
window.setCountdown = function (code, delay, callback, interval) {
var timeout = delay;
var timeoutId = setTimeout(function(){
clearCountdown(timeoutId);
return code();
}, delay);
window.activeCountdowns.push(timeoutId);
setTimeout(function countdown(){
var key = window.activeCountdowns.indexOf(timeoutId);
if (key < 0) return;
timeout -= interval;
setTimeout(countdown, interval);
return callback(timeout);
}, interval);
return timeoutId;
};
window.clearCountdown = function (timeoutId) {
clearTimeout(timeoutId);
var key = window.activeCountdowns.indexOf(timeoutId);
if (key < 0) return;
window.activeCountdowns.splice(key, 1);
};
})();
//example
var t = setCountdown(function () {
console.log('done');
}, 15000, function (i) {
console.log(i / 1000);
}, 1000);
答案 11 :(得分：0)
我在这里停下来寻找答案，但我想得太多了。如果您在这里是因为只需要在setTimeout进行时跟踪时间，这是另一种方法：
var focusTime = parseInt(msg.time) * 1000
setTimeout(function() {
alert('Nice Job Heres 5 Schrute bucks')
clearInterval(timerInterval)
}, focusTime)
var timerInterval = setInterval(function(){
focusTime -= 1000
initTimer(focusTime / 1000)
}, 1000);
答案 12 :(得分：0)
您可以修改 setTimeout以将每个超时的结束时间存储在地图中，并创建一个名为 getTimeout 的函数以获取剩余时间具有特定ID的超时。
这是super的solution，但我对其进行了修改，以使用较少的内存
let getTimeout = (() => { // IIFE
let _setTimeout = setTimeout, // Reference to the original setTimeout
map = {}; // Map of all timeouts with their end times
setTimeout = (callback, delay) => { // Modify setTimeout
let id = _setTimeout(callback, delay); // Run the original, and store the id
map[id] = Date.now() + delay; // Store the end time
return id; // Return the id
};
return (id) => { // The actual getTimeout function
// If there was no timeout with that id, return NaN, otherwise, return the time left clamped to 0
return map[id] ? Math.max(map[id] - Date.now(), 0) : NaN;
}
})();
用法：
// go home in 4 seconds
let redirectTimeout = setTimeout(() => {
window.location.href = "/index.html";
}, 4000);
// display the time left until the redirect
setInterval(() => {
document.querySelector("#countdown").innerHTML = `Time left until redirect ${getTimeout(redirectTimeout)}`;
},1);
这是此getTimeout IIFE的缩小版：
let getTimeout=(()=>{let t=setTimeout,e={};return setTimeout=((a,o)=>{let u=t(a,o);return e[u]=Date.now()+o,u}),t=>e[t]?Math.max(e[t]-Date.now(),0):NaN})();
我希望这对您和我一样有用！ ：）
答案 13 :(得分：0)
一种更快，更容易的方法：
tmo = 1000;
start = performance.now();
setTimeout(function(){
foo();
},tmo);
您可以通过以下方式获得剩余时间：
timeLeft = tmo - (performance.now() - start);