trouver le temps de la gauche dans un setTimeout()?

Si vous ne pouvez pas modifier le code de la bibliothèque, vous aurez besoin de redéfinir setTimeout pour répondre à vos fins. Voici un exemple de ce que vous pourriez faire:

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

Ce n'est pas le code de production, mais il devrait vous mettre sur la bonne voie. Notez que vous ne pouvez lier un port d'écoute par timeout. Je n'ai pas fait de nombreux essais avec cela, mais il fonctionne dans Firebug.

Une solution plus robuste serait d'utiliser la même technique d'emballage setTimeout, mais au lieu d'utiliser une carte de l'retourné timeoutId aux auditeurs de gérer plusieurs auditeurs par timeout. Vous pourriez aussi envisager d'emballage clearTimeout de sorte que vous pouvez détacher votre écoute si le délai d'attente est désactivée.

EDIT: en fait, je pense que j'ai fait une bien meilleure: https://stackoverflow.com/a/36389263/2378102

J'ai écrit cette fonction et je l'utilise beaucoup:

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

Faire un timer:

a = new timer(function() {
    //What ever
}, 3000)

Donc, si vous voulez le temps qui reste juste à faire:

a.getTimeLeft()

Ici est peut-être une meilleure façon de le faire, en plus, vous n'aurez pas besoin de changer le code que vous avez déjà écrit:

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

... Et mimimized:

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

Non, mais vous pouvez avoir votre propre setTimeout/setInterval pour l'animation dans votre fonction.

Dire à votre question ressemble à ceci:

function myQuestion() {
  //animate the progress bar for 1 sec
  animate( "progressbar", 1000 );

  //do the question stuff
  //...
}

Et votre animation sera assurée par ces 2 fonctions:

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

Question a déjà été répondu, mais je vais ajouter ma pierre. Il juste de se dérouler pour moi.

Utilisation setTimeout dans recursion comme suit:

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

Je suppose que le code est auto-explicatif

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

Vous pouvez modifier setTimeout pour stocker chaque délai d'attente de la fin des temps dans une carte et de créer une fonction appelée getTimeout pour obtenir le temps laissé à un délai d'attente avec une certaine id.

C'était super's solution, mais je l'ai modifié pour utiliser un peu moins de mémoire

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

Utilisation:

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

Voici une version compacte de cette 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})();

J'espère que cela est utile pour vous comme pour moi! 🙂