第 133 题：用 setTimeout 实现 setInterval，阐述实现的效果与setInterval的差异

[impeiran]

当中应该涉及setInterval的特性，node环境与浏览器的又会作何表现

[neofanfei]

function timeout(fn,time){ var timer; if(timer){ clearTimeout(timer) } return function() { timer = setTimeout(function(){ fn(); timeout(fn,time)() },time); } } function interval (fn,time) { timeout(fn,time)() }

[hugeorange]

function mySetInterval() {
  var args = arguments
  var timer = setTimeout(() => {
    args[0]()
    args.callee(...args)
  }, args[1])
  return timer
}

var timer = mySetInterval(() => {
  console.log(111)
}, 1000)

// clearInterval 清除计时器的方法还不知道怎么实现

---

受下面那位老哥@weiweixuan的启发 ，改了下代码，实现了清理功能

    function mySetInterval() {
        mySetInterval.timer = setTimeout(() => {
            arguments[0]()
            mySetInterval(...arguments)
        }, arguments[1])
    }

    mySetInterval.clear = function() {
        clearTimeout(mySetInterval.timer)
    }

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

    setTimeout(() => {
        // 5s 后清理
        mySetInterval.clear()
    }, 5000)

[shadowdreamer]

   const mySetInterval = (fn,duration)=>{
        const timer = {}
        function timeout(fn,duration){
            return setTimeout(()=>{
                fn();
                timer.timeout = timeout(fn,duration)
            },duration)
        }
        timer.timeout = timeout(fn,duration)
        return timer
    }
    const clearMySetInterval = (timer)=>{
        clearTimeout(timer.timeout)
    }
    //test
    console.time('timer')
    console.time('interval')
    const timer = mySetInterval(()=>console.timeLog('timer'),300)
    const interval = setInterval(()=>console.timeLog('interval'),300)
    setTimeout(()=>{
        clearMySetInterval(timer)
        clearInterval(interval)
    },3000)

自己实现的的setTimerout回调版只能打印9次，会越来越慢。原版setInterval能打印10次

[IAMSBLOL]

    var timer = null;
    var a = function(t){
        console.log(new Date().valueOf())
        timer= setTimeout(a,t)

    }
    a.close=function(){
        clearTimeout(timer)
    }
    a(1000) // 模拟一秒一次
   a.close() // 关闭

// 区别

[weiweixuan]

[weiweixuan]

带清理功能的

[guqianfeng]

1. 简单的代码实现

    function foo(){
        console.log("执行foo");
        setTimeout(foo, 1000)
    }
    foo();
    function goo(){
        console.log("执行goo");
    }
    setInterval(goo, 1000);

2. 之前学习setInterval，设置的间隔时间过短的时候，如果代码块里的代码并没有执行完也会重新开始执行？(我一直都是这么理解的)，但使用setTimeout实现setInterval的这个效果就没这个问题，必然会把代码块中的代码运行玩后，然后才会再次调用该函数
3. requestAnimationFrame的兼容写法应该就是类似我这个setTimeout实现setInterval的代码
4. 求大佬指正轻喷，本人萌新- -

[impeiran]

1. 简单的代码实现

    function foo(){
        console.log("执行foo");
        setTimeout(foo, 1000)
    }
    foo();
    function goo(){
        console.log("执行goo");
    }
    setInterval(goo, 1000);

1. 之前学习setInterval，设置的间隔时间过短的时候，如果代码块里的代码并没有执行完也会重新开始执行？(我一直都是这么理解的)，但使用setTimeout实现setInterval的这个效果就没这个问题，必然会把代码块中的代码运行玩后，然后才会再次调用该函数
2. requestAnimationFrame的兼容写法应该就是类似我这个setTimeout实现setInterval的代码
3. 求大佬指正轻喷，本人萌新- -

只有你提到了setInterval的那个痛点..

[facingcheer]

大概实现了一下？返回值和原生略有不同使用了对象方便访问：

function myInterval(func, duration) {
  let tag = {
    flag: +new Date
  }
  const f = () => setTimeout(() => {
    if(tag.flag){
      func()
      f()
    }
  }, duration)
  f()
  return tag
}

function myClear(tag) {
  tag.flag = 0
}

let t = myInterval(() => console.log(1), 3000)

myClear(t)

[JaniceDong]

timerFun();
function timerFun() {
console.log('1');
var timer = setTimeout(function() {
timerFun();
clearTimeout(timer)
}, 1000)
}

[qiujuyingshuang]

@hugeorange 这种实现与setInterval的差异呢？

[ddchef]

function _setinterval(callback,time){
  let timer = {}
  function run(){
    clearTimeout(timer)
    timer = setTimeout(()=>{
      callback()
      run()
    },time)
  }
  run()
  return {
    clear(){
      clearTimeout(timer)
    }
  }
}

function _clearInterval(timer){
  timer.clear()
}

let callback = ()=>{
  console.count()
}

let timer = _setinterval(callback,2000)

setTimeout(function(){
  _clearInterval(timer)
},2000*10)

[734776328]

function mySetInterval() {
mySetInterval.id = setTimeout(() => {
arguments0
mySetInterval(...arguments)
}, arguments[1])
}

mySetInterval.clearInterval = function (intervalId) {
clearTimeout(intervalId)
}

mySetInterval( () => {
console.log('1')
}, 1000)

setTimeout(() => {
mySetInterval.clearInterval(mySetInterval.id)
}, 5000)

[francecil]

预备知识

在浏览器中，setInterval的方法定义为：

long setInterval(in any handler, in optional any timeout, in any... args);

可以看出，该方法返回的句柄是不变的 long 值，我们需要通过该句柄去取消定时器

另一个要注意的点是：该方法的执行上下文必须为 window，WorkerUtils ，或者 实现 WindowTimers interface的对象（这个目前不知道怎么实现）

interface WindowTimers {
  long setTimeout(in any handler, in optional any timeout, in any... args);
  void clearTimeout(in long handle);
  long setInterval(in any handler, in optional any timeout, in any... args);
  void clearInterval(in long handle);
};
Window implements WindowTimers;

注意：clearInterval(lone handler) 会对 handler 做隐式类型转换，下文有用到该特性

而在node环境中， setInterval 返回的是一个 Timeout 对象，

clearInterval(object timer)， 故 clearInterval 不会对其中的参数做隐式类型转换(https://github.com/nodejs/node/blob/master/lib/timers.js#L194)

setTimeout 模拟

setTimeout 模拟 setInterval(handler,?timeout,...args) ，有两种实现：

注意这里我们要返回一个 timer的引用，但是timer又只能是Int，只能采取重写 valueOf 的方式实现

1. 先执行 fn 再 重新设置 setTimeout

function setInterval1 (handler,timeout,...args) {
  let isBrowser = typeof window !=='undefined'
  if(isBrowser && this!==window){
    throw 'TypeError: Illegal invocation'
  }
  let timer = {}
  if(isBrowser){
    // 浏览器上处理
    timer = {
      value:-1,
      valueOf: function (){
        return this.value
      }
    }
    let callback = ()=>{
      handler.apply(this,args)
      timer.value = setTimeout(callback,timeout)
    }
    timer.value = setTimeout(callback,timeout)
  } else {
    // nodejs的处理
    let callback = ()=>{
      handler.apply(this,args)
      Object.assign(timer,setTimeout(callback,timeout))
    }
    Object.assign(timer,setTimeout(callback,timeout))
  }
  return timer
}

测试用例：

// 基础功能：不断的打印3
setInterval1 ((a,b)=>console.log(a+b),1000,1,2) 
// 清除定时器: 打印10次3后停止
let t = setInterval1 ((a,b)=>console.log(a+b),1000,1,2)
setTimeout(()=>{
  window.clearInterval(t)
},10.5*1000)
// this：前两个均提示非法调用错误，最后一个可以成功调用 定时输出 undefined
// node 下都可以调用
let tmp = {
  a:1,
  test:setInterval
}
let tmp1 = {
  a:1,
  test:setInterval1
}
tmp.test(function(){
  console.log(this.a)
},1000)
tmp1.test(function(){
  console.log(this.a)
},1000)
tmp1.test.call(window,() =>{
  console.log(this.a)
},1000)

2. 先设置 setTimeout 再执行 fn

function setInterval2 (handler,timeout,...args) {
  let isBrowser = typeof window !=='undefined'
  if(isBrowser && this!==window){
    throw 'TypeError: Illegal invocation'
  }
  let timer = {}
  if(isBrowser){
    // 浏览器上处理
    timer = {
      value:-1,
      valueOf: function (){
        return this.value
      }
    }
    let callback = ()=>{
      // 区别在这
      timer.value = setTimeout(callback,timeout)
      handler.apply(this,args)
    }
    timer.value = setTimeout(callback,timeout)
  } else {
    // nodejs的处理
    let callback = ()=>{
      // 区别在这
      Object.assign(timer,setTimeout(callback,timeout))
      handler.apply(this,args)
    }
    Object.assign(timer,setTimeout(callback,timeout))
  }
  return timer
}

setInterval 、 setInterval1 、 setInterva2 三者差异对比

先编写预处理函数

function setInterval1 (handler,timeout,...args) {
  let isBrowser = typeof window !=='undefined'
  if(isBrowser && this!==window){
    throw 'TypeError: Illegal invocation'
  }
  let timer = {}
  if(isBrowser){
    // 浏览器上处理
    timer = {
      value:-1,
      valueOf: function (){
        return this.value
      }
    }
    let callback = ()=>{
      handler.apply(this,args)
      timer.value = setTimeout(callback,timeout)
    }
    timer.value = setTimeout(callback,timeout)
  } else {
    // nodejs的处理
    let callback = ()=>{
      handler.apply(this,args)
      Object.assign(timer,setTimeout(callback,timeout))
    }
    Object.assign(timer,setTimeout(callback,timeout))
  }
  return timer
}
function setInterval2 (handler,timeout,...args) {
  let isBrowser = typeof window !=='undefined'
  if(isBrowser && this!==window){
    throw 'TypeError: Illegal invocation'
  }
  let timer = {}
  if(isBrowser){
    // 浏览器上处理
    timer = {
      value:-1,
      valueOf: function (){
        return this.value
      }
    }
    let callback = ()=>{
      // 区别在这
      timer.value = setTimeout(callback,timeout)
      handler.apply(this,args)
    }
    timer.value = setTimeout(callback,timeout)
  } else {
    // nodejs的处理
    let callback = ()=>{
      // 区别在这
      Object.assign(timer,setTimeout(callback,timeout))
      handler.apply(this,args)
    }
    Object.assign(timer,setTimeout(callback,timeout))
  }
  return timer
}
// 同步处理函数
function syncHandler(ms) {
  let d = Date.now()
  while (Date.now() - d < ms) { }
}
// 异步处理函数
function asyncHandler(callback,ms){
  setTimeout(callback,ms)
}
let scope = typeof window !=='undefined'?window:global
// 主测试函数
function test(setInterval,count){
  return (handler,timeout,...args) => {
    let t = setInterval (handler,timeout,...args)
    setTimeout(()=>{
      scope.clearInterval(t)
    },(count+0.5)*timeout)
  }
}

1. handler 为同步处理函数

• setInterval

var start = Date.now()
var icounter = 0
test(setInterval,5)(function(){
  var time = (Date.now() - start) / 1000
  console.log('setInterval=>次数：' + (++icounter) + '    所用时间：' + time.toFixed(3))
  syncHandler(100)
},1000)
/*
# chrome76
setInterval=>次数：1    所用时间：1.002
setInterval=>次数：2    所用时间：2.001
setInterval=>次数：3    所用时间：3.000
setInterval=>次数：4    所用时间：4.002
setInterval=>次数：5    所用时间：5.002
# node v10
setInterval=>次数：1    所用时间：1.003
setInterval=>次数：2    所用时间：2.004
setInterval=>次数：3    所用时间：3.005
setInterval=>次数：4    所用时间：4.005
setInterval=>次数：5    所用时间：5.005
*/

• setInterval1

var start = Date.now()
var icounter = 0
test(setInterval1,5)(function(){
  var time = (Date.now() - start) / 1000
  console.log('setInterval1=>次数：' + (++icounter) + '    所用时间：' + time.toFixed(3))
  syncHandler(100)
},1000)
/*
# chrome76
setInterval1=>次数：1    所用时间：1.001
setInterval1=>次数：2    所用时间：2.103
setInterval1=>次数：3    所用时间：3.204
setInterval1=>次数：4    所用时间：4.305
setInterval1=>次数：5    所用时间：5.406
# node v10
setInterval1=>次数：1    所用时间：1.005
setInterval1=>次数：2    所用时间：2.121
setInterval1=>次数：3    所用时间：3.224
setInterval1=>次数：4    所用时间：4.324
setInterval1=>次数：5    所用时间：5.428
*/

• setInterval2

var start = Date.now()
var icounter = 0
test(setInterval2,5)(function(){
  var time = (Date.now() - start) / 1000
  console.log('setInterval2=>次数：' + (++icounter) + '    所用时间：' + time.toFixed(3))
  syncHandler(100)
},1000)
/*
# chrome76
setInterval2=>次数：1    所用时间：1.001
setInterval2=>次数：2    所用时间：2.004
setInterval2=>次数：3    所用时间：3.005
setInterval2=>次数：4    所用时间：4.007
setInterval2=>次数：5    所用时间：5.008
# node v10
setInterval2=>次数：1    所用时间：1.006
setInterval2=>次数：2    所用时间：2.005
setInterval2=>次数：3    所用时间：3.005
setInterval2=>次数：4    所用时间：4.005
setInterval2=>次数：5    所用时间：5.005
*/

当 handler 为同步处理函数且执行时间小于 timeout，我们可以得到以下结论：

1. 浏览器执行结果与 nodejs 没有差异
2. setInterval 与 setInterval2 效果相近，说明 setInterval 是先将自身 handle 放入timer堆，再执行回调函数
3. 先执行回调函数再设置 settimeout 会导致下次执行实现等待时间大于 timeout+同步代码执行时间

通过 node-libuv 源码可以证明

void uv__run_timers(uv_loop_t* loop) {
  struct heap_node* heap_node;
  uv_timer_t* handle;

  for (;;) {
    heap_node = heap_min(timer_heap(loop));//取出timer堆上超时时间最小的元素
    if (heap_node == NULL)
      break;
    //根据上面的元素，计算出handle的地址，head_node结构体和container_of的结合非常巧妙，值得学习
    handle = container_of(heap_node, uv_timer_t, heap_node);
    if (handle->timeout > loop->time)//如果最小的超时时间比循环运行的时间还要小，则表示没有到期的callback需要执行，此时退出timer阶段
      break;

    uv_timer_stop(handle);//将这个handle移除
    uv_timer_again(handle);//如果handle是repeat类型的，重新插入堆里
    handle->timer_cb(handle);//执行handle上的callback
  }
}