WEEX H5 Render 解读（4）之定时器（setTime

上篇文章我们阅读了weex的类的构造过程。

---

这节我们将要查看Weex的定时器。在js中我们知道定时器有两种，超时执行定时器和间隔执行定时器。但是在原生app中，只有超时执行定时器。可能weex为了兼容原生开发，只提供了一种定时器--超时执行定时器（setTimeout）。

由于webpack的打包，我们只能在调试模式下才能看到源码或者在weex timer可以看到。

下面我贴出浏览器中的time.js的代码

'use strict'

const timer = {
  setTimeout: function (timeoutCallbackId, delay) {
/*sender = Sender {
                instanceId: "http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=tech_list.js&loader=xhr",
                 weexInstance: Weex
          }*/
    const sender = this.sender
    const timerId = setTimeout(function () {
      sender.performCallback(timeoutCallbackId)
    }, delay)
    return timerId
  },
  clearTimeout: function (timerId) {
    clearTimeout(timerId)
  }
}
timer._meta = {
  timer: [{
    name: 'setTimeout',
    args: ['function', 'number']
  }, {
    name: 'clearTimeout',
    args: ['number']
  }]
}
module.exports = timer
/** WEBPACK FOOTER **
 ** ./html5/browser/api/timer.js
 **/

我们可以看到这里面定义了两个方法，setTimeout和claerTimeout。

timer._meta = {
  timer: [{
    name: 'setTimeout',
    args: ['function', 'number']
  }, {
    name: 'clearTimeout',
    args: ['number']
  }]
}

这句代码中._meta是为weex注册apimodule使用的。这在browser/api/index.js中可以得到验证：

如果想使用setInterval，那么可以使用setTimeout模拟，代码如下：

var intervalId=function(){
                require('@weex-module/timer').setTimeout(function(){
                    _this.user.timeoutNum=_this.user.timeoutNum-1;
                    intervalId();
                },1000);        
          };
      intervalId();