如何用setTimeout实现setInterval、clearInterval

面试的时候被问到这个题，然后没能解答出来，回去想了想，想出来了一种方案。

一、首先来看看怎么实现setInterval 的：

var mySetInterval= function(fn, time) {
// 定义一个递归函数，持续调用定时器
  var execute = function(fn, time) {
     setTimeout(function(){
        fn();
        execute(fn, time);
     }, time)
   }
  execute(fn, time);
}

我们来调用一下：

var set1 = mySetInterval(function() {
   console.log(1);
}, 3000)

控制台

image.png

二、那么如果我们如何实现clearInterval 呢？

首先，我们先来研究一下setTimeout ：

image.png

setTimeout 返回的竟然是一串整数，并且这些整数都不重复，还是连续的，没错，这个就是clearTimeout 工作的时候，会找到对应的id的定时器，然后清除掉，好了，知道了这个，那么我们能不能把当前定义的mySetInterval 的id存储下来呢?

var timeWorker = {}
var mySetInterval= function(fn, time) {
// 定义一个key，来标识此定时器
var key = Symbol();
// 定义一个递归函数，持续调用定时器
  var execute = function(fn, time) {
     timeWorker[key] = setTimeout(function(){
        fn();
        execute(fn, time);
     }, time)
   }
  execute(fn, time);
  // 返回key
  return key;
}
var myClearInterval = function(key) {
  if (key in timeWorker) {
   clearTimeout(timeWorker[key]);
    delete timeWorker[key];
  }
}

来看一下执行结果：

image.png

成功！