使用 setTimeout 和 clearTimeout 模拟 setInterval 和 clearInterval

实现 mySetInterval

如题，我先是简单的实现了一下 mySetInterval

let mySetInterval = (callback, time) => {
  let fn = () => {
    return setTimeout(() => {
      callback && callback();
      fn();
    }, time);
  };
  return fn();
};

mySetInterval(() => {
  console.log(123);
}, 1000);

实现 mySetInterval

实现这个废了些功夫，但是还是不满意，因为下面几点原因

• setTimeout 用完之后，再次创建 setTimeout 的时候，返回的是新的类似 id 的一个对象，这时候你去 clearTimeout 是没用的，因为函数返回的是旧的 id
• mySetInterval 需要像 setInterval 方法返回一个类似 id 的一个对象，然后再调用 myClearInterval 传入这个 id 清除，但是你如果创建多个 mySetInterval，他们需要具有唯一性。

然后我写了下面的方法，其中 intervalMap 是用来保存你新建的 mySetInterval 实例，具有唯一性。这个方法的缺点显而易见，要定义一个全局的 intervalMap 去保存。 我太菜了，只能这么写了。下面还有新方法，虽然可以不用定义全局 intervalMap，但是 mySetInterval 方法返回的不是和 setTimeout 类似的 id 的一个对象

第一个办法

const intervalMap = new Map();

let mySetInterval = (callback, time) => {
  let timeoutFirst = null;
  let fn = () => {
    let newTime = setTimeout(() => {
      callback && callback();
      fn();
    }, time);
    if (!timeoutFirst) {
      timeoutFirst = newTime;
    }
    intervalMap.set(timeoutFirst, newTime);
  };
  fn();
  return timeoutFirst;
};

const myClearInterval = (params) => {
  clearTimeout(intervalMap.get(params));
  intervalMap.delete(params);
};

let time1 = mySetInterval(() => {
  console.log(123);
}, 1000);

let time2 = mySetInterval(() => {
  console.log(456);
}, 2000);

let time3 = mySetInterval(() => {
  console.log(789);
}, 3000);

setTimeout(() => {
  myClearInterval(time1);
  myClearInterval(time2);
  myClearInterval(time3);
}, 5000);

第二个办法

const mySetInterval = (callback, time) => {
  let timer = {};
  const fn = () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      callback();
      fn();
    }, time);
  };
  fn();
  return {
    clear: () => {
      clearTimeout(timer);
    },
  };
};

const myClearInterval = (timer) => {
  timer.clear();
};

后记

自己是在是太菜了，短时间内没想出怎么样才能写出和 setInterval、clearInterval 实现一致的方法。

然后因为周六么，我群里请教的时候也没什么人。。有个大佬点评我代码太乱了，怎么把握去思考逻辑对不对的？

然后如果哪位朋友实现了可以联系我。。我想学习一下怎么写