setTimeout vs setInterval

定时器差异及event loop

by weiming le

Babel + JSX

var intervalDemo, timeoutDemo;
intervalDemo = () => {
  var timer, i = 0,
    d1 = new Date(),
    t = 20,
    eventLoop = [],
    d2;
  var inner = () => {
    return new Promise((resolve, reject) => {
      eventLoop.push(`延迟回调${i}`);
      var cache = new Date();
      setTimeout(function() {
        d2 = d2 || new Date();
        let diff = new Date() - d2;
        d2 = new Date();
        resolve(`success:${++i},timeout interval is: ${new Date()-cache},eventLoop interval is:${diff}`);
      }, 3000);
    });
  };
  var loop = () => {
    console.log('loop');
    var count = Math.ceil((new Date() - d1) / t);
    eventLoop.push(`iterval第${--count}`);
    if (count > 6) {
      clearInterval(timer);
      timer = null;
      console.log(eventLoop);
      return;
    }
    inner().then(res => {
      console.log(res);
    })
  }
  timer = setInterval(loop, t);
}
timeoutDemo = () => {
    var timer, i = 0,
      d1 = new Date(),
      t = 20;
    var inner = () => {
      return new Promise((resolve, reject) => {
        var cache = new Date();
        setTimeout(function() {
          resolve(`success:${i}`);
        }, 3000);
      });
    };
    var loop = () => {
      console.log('loop');
      if (i > 6) {
        clearTimeout(timer);
        timer = null;
        return;
      }
      inner().then(res => {
        console.log(res);
        i++;
        timer = setTimeout(loop, t);
      })
    }
    timer = setTimeout(loop, t);
  }
  //intervalDemo();
timeoutDemo();