setTimeout – maximale Timeout-Footgun

Kürzlich habe ich im wirklichen Leben eine Fußfeuerwaffe entdeckt, die mit setTimeout zusammenhängt. Ich musste für einen Verkaufstimer ein Timeout von beispielsweise 28 Tagen ausführen, ich hatte einen UTC-Zeitstempel für das Ende Tag, also habe ich das mit der naiven Herangehensweise gemacht

 const date1 = new Date(timestamp1);

  // Difference in milliseconds
  const timeout = date2.getTime() - Date.now();

setTimeout(()=>{
     // some code to turn off some flags / remove some banner
  },timeout);

Zu meiner Überraschung funktionierte dies nicht oder sehr gut, da der Code in setTimeout ausgeführt wurde, ohne auf die Zeitüberschreitung zu warten. Ich beschloss, im Browser zu debuggen, und sah, dass das Steuerelement fast sofort in den setTimeout-Rückruf springt.

Was ist hier das Problem?

Bei einem Blick auf die MDN-Seite von setTimeout, https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value, war klar, dass es eine maximale Grenze gibt, bis zu der setTimeout() ausgeführt wird genau, konkret
2.147.483.647 ms oder (24,8 Tage) oder (2**31 - 1) ms, das liegt daran, dass Browser die Verzögerung intern als 32-Bit-Ganzzahl mit Vorzeichen speichern.

Wenn Sie also ein Timeout von mehr als 24,8 Tagen übergeben, kommt es zu einem Integer-Überlauf und der Code wird sofort bzw. mit einer kürzeren Timeout-Dauer als erwartet ausgeführt. Das ist schade und es liegt kein Fehler vor !!!

Mögliche Lösungen für dieses Problem

const days = 30;
const timeout = days * 24 * 60 * 60 * 1000;
console.log('timeto', timeout);
setTimeout(function () {
  console.log('ticked immediately'); // --> executed almost instantly 
}, timeout);


class LongTimeout {
  constructor(cb, timeout) {
    this.timeStart = document.timeline
      ? document.timeline.currentTime
      : performance.now();
    this.lastAnimationFrame = this.runTimer(cb, timeout);
  }
  runTimer(cb, timeout) {
   if(this.cancelled) return;
    const currTimeStamp = performance.now();
    const elapsed = currTimeStamp - this.timeStart;
    if (elapsed >= timeout) {
      cb();
      window.cancelAnimationFrame(this.lastAnimationFrame);
    } else {
      console.log('tick', elapsed, timeout);
      this.lastAnimationFrame = requestAnimationFrame(() =>
        this.runTimer(cb, timeout)
      );
    }
  }
  cancelTimeout() {
    window.cancelAnimationFrame(this.lastAnimationFrame);
    this.cancelled = true;
    this.lastAnimationFrame = null;
  }
}

const longTimer = new LongTimeout(() => {
  console.log(`Tick after ${timeout}`); // timeout works -> does not execute immediately
}, timeout);

Das obige ist der detaillierte Inhalt vonsetTimeout – maximale Timeout-Footgun. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!