找到 setTimeout() 中剩余的时间？

Question

我正在编写一些与我不拥有的库代码交互的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 );

我想在屏幕上放置一个进度条，通过询问 setTimeout 创建的计时器，该进度条会向 questionTime * 1000 填充。唯一的问题是，似乎没有办法做到这一点。我是否缺少 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，我希望事情能够异步。

Answer 1

仅供记录，有一种方法可以获取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，我认为此评论可能对寻找的人有帮助为节点解决方案。

Answer 2

编辑：我实际上认为我做了一个更好的： 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()

Answer 3

如果您无法修改库代码，则需要重新定义 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，以便在超时被清除时可以分离侦听器。

Answer 4

特定于服务器端 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+ 中使用刷新计时器处理对象可能会很有趣。

Answer 5

更快、更简单的方法：

tmo = 1000;
start = performance.now();
setTimeout(function(){
    foo();
},tmo);

您可以通过以下方式获取剩余时间：

 timeLeft = tmo - (performance.now() - start);

Answer 6

Javascript 的事件堆栈并不像你想象的那样运作。

创建超时事件后，它会被添加到事件队列中，但在该事件被触发时，其他事件可能会优先，从而延迟执行时间并推迟运行时间。

示例：您创建一个延迟 10 秒的超时，以向屏幕发出提醒。它将被添加到事件堆栈中，并在所有当前事件被触发后执行（导致一些延迟）。然后，当超时处理完毕后，浏览器仍然继续捕获其他事件并将它们添加到堆栈中，这会导致处理进一步延迟。如果用户单击或进行大量 ctrl+打字，则他们的事件优先于当前堆栈。你的 10 秒可以变成 15 秒，甚至更长。

---

话虽这么说，有很多方法可以伪造已经过去了多少时间。一种方法是将 setTimeout 添加到堆栈后立即执行 setInterval。

示例：执行 10 秒延迟的设置超时（将该延迟存储在全局中）。然后执行每秒运行一次的 setInterval 将延迟减去 1 并输出剩余的延迟。由于事件堆栈如何影响实际时间（如上所述），这仍然不准确，但确实给出了计数。

---

简而言之，没有真正的方法来获取剩余时间。只有尝试向用户传达估计值的方法。

Answer 7

我在这里停下来寻找这个答案，但过度思考了我的问题。如果您在这里是因为您只需要在 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);

Answer 8

您可以修改 setTimeout 将每个超时的结束时间存储在地图中，并创建一个名为 getTimeout 的函数来获取某个 id 超时的剩余时间。

这是super的解决方案，但我修改了它以使用稍微更少的内存

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})();

我希望这对您和我一样有用！ :)

Answer 9

不，但是您可以在函数中为动画设置自己的 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 );
}

Answer 10

问题已经得到解答，但我会补充一点。我刚刚想到的。

在recursion中使用setTimeout如下：

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");
}

我想代码是不言自明的

Answer 11

检查此项：

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()

Answer 12

    (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);

Answer 13

对于任何需要钩子的人，请检查一下 - 应该是非常不言自明的。

请注意，elapsed 是一个内部状态变量，如果传递到钩子外部将是不正确的！

import { useEffect, useRef, useState } from 'react';

const useTimeout = (callback, duration, renderDuration = 5) => {
  const ref = useRef<any>(null);
  const [timeInfo, setTimeInfo] = useState<{
    start: number;
    elapsed: number;
    percentComplete: number;
  }>({
    start: null,
    elapsed: 0,
    percentComplete: 0
  });

  useEffect(() => {
    return () => {
      if (ref.current) {
        clearTimeout(ref.current);
        ref.current = null;
      }
    };
  }, []);

  useEffect(() => {
    setTimeout(() => {
      if (ref.current == null) return;
      setTimeInfo((prev) => {
        const elapsed = Date.now() - prev.start + prev.elapsed;

        if (ref.current == null) return prev;
        return {
          start: prev.start,
          elapsed: prev.elapsed,
          percentComplete: (elapsed / duration) * 100
        };
      });
    }, renderDuration);
  }, [timeInfo]);

  return {
    percentComplete: timeInfo.percentComplete,
    isTimerRunning: ref.current != null,
    startTimeout: () => {
      if (ref.current != null) return;
      setTimeInfo((prev) => ({ ...prev, start: Date.now() }));
      ref.current = setTimeout(callback, duration - timeInfo.elapsed);
    },
    stopTimeout: () => {
      if (ref.current) {
        clearTimeout(ref.current);
        ref.current = null;
      }
      setTimeInfo((prev) => {
        const elapsed = Date.now() - prev.start + prev.elapsed;
        return {
          start: prev.start,
          elapsed: elapsed,
          percentComplete: (elapsed / duration) * 100
        };
      });
    },
    resetTimeout: () => {
      if (ref.current) {
        ref.current = null;
        clearTimeout(ref.current);
      }
      setTimeInfo({ start: null, elapsed: 0, percentComplete: 0 });
    },
    restartTimeout: () => {
      if (ref.current) {
        ref.current = null;
        clearTimeout(ref.current);
      }
      setTimeInfo({ start: Date.now(), elapsed: 0, percentComplete: 0 });
      ref.current = setTimeout(callback, duration);
    }
  };
};

export default useTimeout;

Answer 14

我创建了一个类，允许您暂停和恢复超时和间隔，希望它有帮助！

class CustomTimer {
  constructor() {
    this._initState();
  }

  start(callback, delay, isInterval = false) {
    if (
      typeof callback !== "function" ||
      typeof delay !== "number" ||
      delay <= 0
    ) {
      throw new Error("Invalid arguments provided to start method.");
    }
    this.stop(); // Clear any previous timer

    this._userCallback = callback;
    this._startTime = Date.now();
    this._endTime = this._startTime + delay;
    this._remaining = delay;

    if (isInterval) {
      this._interval = delay;
    }

    this._startTimer(delay);
  }

  pause() {
    if (!this._timerId || this._isPaused) return;

    this._isPaused = true;
    this._remaining -= Date.now() - this._startTime;

    this._clearTimer();
  }

  resume() {
    if (!this._isPaused) return;

    this._startTimer(this._remaining);

    this._isPaused = false;
    this._startTime = Date.now();
    this._endTime = this._startTime + this._remaining;
  }

  stop() {
    this._clearTimer();
    this._initState();
  }

  _initState() {
    this._startTime = null;
    this._endTime = null;
    this._remaining = null;
    this._interval = null;
    this._userCallback = null;
    this._timerId = null;
    this._isPaused = false;
  }

  _startTimer(delay) {
    // If it's an interval and it's paused, then on resume, we just use a setTimeout.
    if (this._interval && this._isPaused) {
      this._timerId = setTimeout(() => {
        this._tick();
        this._timerId = setInterval(this._tick, this._interval);
      }, delay);
    } else {
      const timerFn = this._interval ? setInterval : setTimeout;
      this._timerId = timerFn(this._tick, delay);
    }
  }

  _clearTimer() {
    if (this._timerId) {
      // clearInterval works for both interval and timeout
      clearInterval(this._timerId);
      this._timerId = null;
    }
  }

  // Using an arrow function here ensures 'this' retains the current instance's context
  // We could also use .bind(this) in the constructor
  // We need to do this because setInterval and setTimeout change the context of 'this'
  _tick = () => {
    if (this._isPaused) return;

    this._userCallback();

    if (this._interval) {
      this._remaining = this._interval;
      this._startTime = Date.now();
      this._endTime = this._startTime + this._remaining;
    } else {
      this.stop();
    }
  };

  get timerId() {
    return this._timerId;
  }

  get timeRemaining() {
    if (this._isPaused) return this._remaining;
    return Math.max(this._endTime - Date.now(), 0);
  }
}

// Example usage

const timer = new CustomTimer();

timer.start(
  () => {
    console.log("Hello!");
  },
  5000,
  true
); // Execute the callback every 5 seconds

setTimeout(() => {
  timer.pause();
  console.log("Timer paused");
}, 2000); // Pause the timer after 2 seconds

setTimeout(() => {
  timer.resume(); // Resume the timer after 4 seconds (2 seconds after it was paused)
}, 4000);

setInterval(() => {
  console.log(`Time remaining: ${timer.timeRemaining}ms.`); // Get the time remaining every second
}, 1000);