quickjs利用libuv实现setTimeout函数

零、前言

　　默认quickjs 是有setTimeout函数的实现的。但是由于js的进程与ui进程会有冲突，因此，需要通过重写quickjs的setTimeout，改用系统进程实现才行。

　　这里以大部分基于quickjs开源的框架中使用最多的libuv作为底层库。

一、编译libuv库

　　通过github源码编译libuv还是有点麻烦，官方没有怎么提供libuv编译脚本，这里我使用微软的vcpkg工具来编译。

git clone https://github.com/microsoft/vcpkg #下载vcpkg
bootstrap-vcpkg.bat #下周vcpkg.exe
vcpkg.exe search libuv
vcpkg.exe install libuv #下载libuv源码，编译、并安装到~/installed目录下

　　后面经过测试，发现从vcpkg编译的lib，有个 GetSystemTimePreciseAsFileTime 函数在win7上未找到。因此需要修改libuv的源代码，改成兼容win7版本，具体修改 src/win/util.c:uv_clock_gettime:449 把 GetSystemTimePreciseAsFileTime(&ft); 改成 GetSystemTimeAsFileTime(&ft); 换成低版本。反正windows上只是仿真，精度误差无所谓。改完之后，也可以用cmake进行编译。然后用Visul Studio进行编译。

cmake -G "Visual Studio 16 2019" -B build

　　简单代码，测试libuv库是否链接成功

int count = 0;
void wait_for_a_while(uv_idle_t *handle)
{
  count ++;
  printf("wait for a while %d\n", count);
  if(count > 10){
    uv_idle_stop(handle);
  }
}
void test_uv()
{
  uv_idle_t idler;
  uv_idle_init(uv_default_loop(), &idler);
  uv_idle_start(&idler, wait_for_a_while);
  uv_run(uv_default_loop(), UV_RUN_DEFAULT);
  uv_loop_close(uv_default_loop());
}

二、修改原来lvgl-simulator

　　原先的lvgl主循环

lv_ui guider_ui;

int main(int argc, char **argv)
{
  (void)argc; /*Unused*/
  (void)argv; /*Unused*/

  /*Initialize LVGL*/
  lv_init();

  /*Initialize the HAL (display, input devices, tick) for LVGL*/
  hal_init();

  setup_ui(&guider_ui);
  events_init(&guider_ui);
  custom_init(&guider_ui);

  while(1) {
      /* Periodically call the lv_task handler.
       * It could be done in a timer interrupt or an OS task too.*/
      lv_timer_handler();
      usleep(5 * 1000);
  }

  return 0;
}

　　之前测试，直接在custom_init里运行js脚本时，会因为阻塞问题，导致主界面会卡死。因此需要对这个main主循环进行改造。在主循环里，创建两个线程，一个gui线程，一个event事件线程。

　　修改后主循环代码如下

uv_loop_t *event_loop;
uv_loop_t *gui_loop;

uv_timer_t job_req;
uv_timer_t job_event;

void gui_loop_cb(uv_timer_t *handle){
  lv_timer_handler();
}
void event_loop_cb(uv_timer_t *handle){
  printf("event_loop_cb\n");
}

int main(int argc, char **argv)
{
  (void)argc; /*Unused*/
  (void)argv; /*Unused*/

  /*Initialize LVGL*/
  lv_init();

  /*Initialize the HAL (display, input devices, tick) for LVGL*/
  hal_init();
  
  gui_loop = uv_default_loop();
  event_loop = uv_default_loop();
  uv_timer_init(gui_loop, &job_req);
  uv_timer_start(&job_req, gui_loop_cb, 100, 5);
  
  uv_timer_init(event_loop, &job_event);
  uv_timer_start(&job_event, event_loop_cb, 100, 500);

  setup_ui(&guider_ui);
  events_init(&guider_ui);
  custom_init(&guider_ui);

  while(uv_run(event_loop, UV_RUN_NOWAIT) || uv_run(gui_loop, UV_RUN_NOWAIT) )
  {
  }
  return 0;
}

三、导出setTimeout函数

　　为了验证功能，部分对象没有进行释放，setTimeout没有做多实例处理。同时还实现绑定click事件。

extern uv_loop_t *event_loop;
uv_timer_t lvgl_job_req;
typedef struct js_timer_data_s {
  JSContext *ctx;
  JSValue func;
} js_timer_data_t;

static void uv__timeout_cb(uv_timer_t *handle) {
  // printf("timeout! uv\n");
  js_timer_data_t *data = (js_timer_data_t *)handle->data;
  JSContext *ctx = data->ctx;
  JSValue func = JS_DupValue(ctx, data->func);
  JSValue ret = JS_Call(ctx, func, JS_UNDEFINED, 0, NULL);
  JS_FreeValue(ctx, func);
  if(JS_IsException(ret)){
    js_std_dump_error(ctx);
  }
  JS_FreeValue(ctx, ret);
  return ;
}


static JSValue lvgl_setTimeout(JSContext *ctx, JSValueConst this_val,
                                    int argc, JSValueConst *argv)
{
  int delay;
  JSValueConst func;
  func = argv[0];
  if(!JS_IsFunction(ctx, func)){
    printf("Not a function\n");
    return JS_EXCEPTION;
  }
  JS_ToInt32(ctx, &delay, argv[1]);

  uv_timer_init(event_loop, &lvgl_job_req);

  js_timer_data_t *data = calloc(1, sizeof(js_timer_data_t));
  data->ctx = ctx;
  data->func = JS_DupValue(ctx, func);
  lvgl_job_req.data = data;
  uv_timer_start(&lvgl_job_req, uv__timeout_cb, delay, 0);
  // uv_run(loop, UV_RUN_ONCE);
  return JS_NULL;
}

void click_event_cb(lv_event_t * e){
  js_timer_data_t *data = (js_timer_data_t *)e->user_data;
  JSContext *ctx = data->ctx;
  JSValue func = JS_DupValue(ctx, data->func);
  JSValue ret = JS_Call(ctx, func, JS_UNDEFINED, 0, NULL);
  JS_FreeValue(ctx, func);
  if(JS_IsException(ret)){
    js_std_dump_error(ctx);
  }
  JS_FreeValue(ctx, ret);
}
static JSValue lvgl_bind_click(JSContext *ctx, JSValueConst this_val,
                                    int argc, JSValueConst *argv)
{
  lv_obj_ptr_t p;
  JS_ToPointer(ctx, &p, argv[0]);
  lv_obj_t * obj = (lv_obj_t *)p;

  JSValueConst func = argv[1];
  if(!JS_IsFunction(ctx, func)){
    printf("Not a function\n");
    return JS_EXCEPTION;
  }
  js_timer_data_t *data = calloc(1, sizeof(js_timer_data_t));
  data->ctx = ctx;
  data->func = JS_DupValue(ctx, func);

  lv_obj_add_event_cb(obj, click_event_cb, LV_EVENT_CLICKED, data);
}

static JSValue lvgl_clearTimeout(JSContext *ctx, JSValueConst this_val,
                                    int argc, JSValueConst *argv)
{
  uv_timer_stop(&lvgl_job_req);
  return JS_NULL;
}

四、js脚本测试

lvgl.lvgl_set_clickable(lbl); //设置可点击
//绑定点击事件
lvgl.lvgl_bind_click(lbl, function(){
  console.log("onclick");
  console.log(this);
  lvgl.lvgl_obj_set_style_bg_color(lbl, 0xff0000);
  clearTimeout();
});

lvgl.lvgl_scr_load(screen);

function changeState(){
  var x = Math.random()*400;
  var y = Math.random()*300;
  console.log(x + "  " + y);
  lvgl.lvgl_obj_set_pos(lbl, x, y);
  setTimeout(changeState, 1000); //定时执行
}
changeState();

 

参考资料：

　　https://zhuanlan.zhihu.com/c_1094553212761309184

　　https://stackoverflow.com/questions/17100883/how-does-the-uv-run-nowait-mode-work-in-libuv

本文地址：https://www.cnblogs.com/wunaozai/p/17853717.html

系列目录：https://www.cnblogs.com/wunaozai/p/17853962.html