javascript setTimeout 参数最大值问题和递归调用

javascript setTimeout 参数最大值问题和递归调用

这是一段最简单的代码

setTimeout(() => {
  console.log('3s后触发');
}, 3000);

但是如果timeout值很大的话，比如

setTimeout(() => {
  console.log('25天后触发');
}, 1000 * 60 * 60 * 24 * 25);

就会报错，并且立马执行

所以如果想设置一个大于24天的定时器怎么办，最简单的办法还是递归

function createTimeout(timeGap, callback, uniqueKey, map) {
  const MAXGap = 1000;
  if (timeGap > MAXGap) {
    const timeouId = setTimeout(async function (timeGap, uniqueKey, map) {
      createTimeout(timeGap, callback, uniqueKey, map);
    }, MAXGap, timeGap - MAXGap, uniqueKey, map);
    map.set(uniqueKey, timeouId);
  } else {
    const timeouId = setTimeout(async function (uniqueKey, map) {
      delTimeOut(map, uniqueKey);
      await callback();
    }, timeGap, uniqueKey, map);
    map.set(uniqueKey, timeouId);
  }
}

function delTimeOut(map, uniqueKey) {
  const tiemout = map.get(uniqueKey);
  if (tiemout) {
    clearTimeout(tiemout);
  }
  map.delete(uniqueKey);
}

这是我封装的一个递归setTimeout
timeGap是定时器到现在的时间，毫秒
callback是定时要执行的函数
map是传入的一个new Map()对象，用于记录setTimeout返回值，在必要时中断递归
uniqueKey是调用时的一个给定值，用于标记这是哪个定时器
delTimeOut用于清除某个递归的定时器

let i = 0;
setInterval(function () {
  i++;
  console.log(i + "s later");
}, 1000);

function createTimeout(timeGap, callback, uniqueKey, map) {
  const MAXGap = 1000;
  if (timeGap > MAXGap) {
    const timeouId = setTimeout(async function (timeGap, uniqueKey, map) {
      createTimeout(timeGap, callback, uniqueKey, map);
    }, MAXGap, timeGap - MAXGap, uniqueKey, map);
    map.set(uniqueKey, timeouId);
  } else {
    const timeouId = setTimeout(async function (uniqueKey, map) {
      delTimeOut(map, uniqueKey);
      await callback();
    }, timeGap, uniqueKey, map);
    map.set(uniqueKey, timeouId);
  }
}

function delTimeOut(map, uniqueKey) {
  const tiemout = map.get(uniqueKey);
  if (tiemout) {
    clearTimeout(tiemout);
  }
  map.delete(uniqueKey);
}

const uniqueKey = 100;
const timeOutEndSet = new Map();

createTimeout(4002, function () {
  console.log('4秒多后触发');
}, uniqueKey, timeOutEndSet);

我这里设置递归的时间时1秒
中间没有清除递归逻辑
结果如下：

现在加上清除递归逻辑：
在上面的代码最后面加上如下代码，表示3秒后清除设定的定时器

setTimeout(() => {
  delTimeOut(timeOutEndSet, uniqueKey);
}, 3000);

可以发现定时器在第3秒已经被清除

最后， const MAXGap = 1000;这个建议改成大一点
上面的1000时为了验证代码正常运行

const MAXGap = 1000 * 60 * 60 * 24 * 24;

可以优化的地方：支持callback参数从外部传参，可以增加createTimeout参数