setTimeout - 最大超时 footgun

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《setTimeout - 最大超时 footgun》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

最近我在现实生活中发现了一个footgun，它与settimeout有关，我必须为销售计时器运行一个28天的超时，我有一个结束日期的utc时间戳，所以用天真的方法，我做了这个

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

令我惊讶的是，这并没有起作用或者效果太好，因为settimeout中的代码没有等待超时就执行了，我决定在浏览器中调试，我看到控件几乎立即跳转到settimeout回调中。

这里有什么问题？

查看settimeout的mdn页面，https://developer.mozilla.org/en-us/docs/web/api/settimeout#maximum_delay_value，很明显settimeout()运行有一个最大限制准确地，具体地
2,147,483,647ms 或（24.8 天）或（2**31 - 1）ms，这是因为浏览器在内部将延迟存储为 32 位有符号整数。

因此，每当您传入超过 24.8 天的超时时，就会出现整数溢出，代码会立即执行，或者超时持续时间比预期短。太糟糕了，而且没有错误！！！

此问题的可能解决方案

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

今天关于《setTimeout - 最大超时 footgun》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！