Implementing separate locked/unlocked faces on js2

Also I prefer using setTimeout instead of setInterval so that I can draw exactly when second changes and not e.g. 700 ms "too late". (This isn't that significant with 1 second interval, but this same code can be used also with 1 minute interval and there I definitely don't want to draw e.g. 40 seconds "too late".)

For example in following example you can call draw whenever you want and it will first redraw and then (re)queue next draw call. If there is already draw queued it's first cleared with clearTimeout.

function draw() {
  // ... draw using isLocked ...

  queueDraw();
}

var drawTimeout;
function queueDraw() {
  if (drawTimeout) clearTimeout(drawTimeout);
  drawTimeout = setTimeout(() => {
    drawTimeout = undefined;
    draw();
  }, 1000 - (Date.now() % 1000));
}

Bangle.on('lock', on => {
  draw();
});

draw();