How to use the @mathigon/core.defer function in @mathigon/core

if (easing === 'bounce-in') easing = BOUNCE_IN;
  if (easing === 'bounce-out') easing = BOUNCE_OUT;

  let oldTransition = null;
  if (Browser.isSafari) {
    oldTransition = $el._el.style.transition;
    $el.css('transition', 'none');
    Browser.redraw();
  }

  // Cancel any previous animations
  if ($el._data._animation) $el._data._animation.cancel();

  const to = {}, from = {};
  const deferred = defer();

  const style = window.getComputedStyle($el._el);
  Object.keys(properties).forEach((k) => {
    const p = properties[k];
    const k1 = toCamelCase(k);
    from[k1] = Array.isArray(p) ? p[0] : style.getPropertyValue(k);
    to[k1] = Array.isArray(p) ? p[1] : p;
    // Set initial style, for the duration of the delay.
    if (_delay) $el.css(k, from[k1]);
  });

  // Special rules for animations to height: auto
  const oldHeight = to.height;
  if (to.height === 'auto') to.height = total($el.children.map($c => $c.outerHeight)) + 'px';

  let player;

if (easing === 'bounce-in') easing = BOUNCE_IN;
  if (easing === 'bounce-out') easing = BOUNCE_OUT;

  let oldTransition: string = '';
  if (Browser.isSafari) {
    oldTransition = $el._el.style.transition;
    $el.css('transition', 'none');
    Browser.redraw();
  }

  // Cancel any previous animations
  const currentAnimation = $el._data['animation'];
  if (currentAnimation) (currentAnimation as AnimationResponse).cancel();

  const to: Keyframe = {}, from: Keyframe = {};
  const deferred = defer();

  const style = window.getComputedStyle($el._el);
  Object.keys(properties).forEach((k) => {
    const p = properties[k];
    const k1 = toCamelCase(k);
    from[k1] = Array.isArray(p) ? p[0] : style.getPropertyValue(k);
    to[k1] = Array.isArray(p) ? p[1] : p;
    // Set initial style, for the duration of the delay.
    if (_delay) $el.css(k, from[k1]!);
  });

  // Special rules for animations to height: auto
  const oldHeight = to.height;
  if (to.height === 'auto') {
    to.height =
        total($el.children.map($c => ($c as HTMLView).outerHeight)) + 'px';

export function thread(url: string|URL, data: any, timeout = 5000) {
  const deferred = defer();
  const worker = new Worker(url);

  const t = setTimeout(() => {
    worker.terminate();
    console.error('WebWorker timeout!');
    deferred.reject();
  }, timeout);

  worker.onmessage = (e: MessageEvent) => {
    clearTimeout(t);
    worker.terminate();
    console.log(e);
    deferred.resolve(e.data);
  };

  worker.onerror = (e: ErrorEvent) => {

for (let $r of $remove) {
      $r.animate({transform: `translate(${transform.x}px,${transform.y}px) scale(2)`}, 400, 400)
          .promise.then(() => $r.remove());
    }

    setTimeout(() => explodeAudio.play(), 100);
    setTimeout(() => this.rearrange(), 400);

    setTimeout(() => {
      if (next) next.addDot(target);
      this.value -= n;
      this.$value.textStr = this.value;
    }, 800);

    const deferred = defer();
    setTimeout(() => {
      const cell = (this.$fullDots.length < n) ? next : this;
      if (!recursive || !cell) return deferred.resolve();
      cell.explode(recursive).then(() => deferred.resolve());
    }, 1200);
    return deferred.promise;
  }

export function animate(callback, duration) {
  if (duration === 0) { callback(); return; }

  const startTime = Date.now();
  let lastTime = 0;
  let running = true;

  const deferred = defer();
  const then = deferred.promise.then.bind(deferred.promise);
  const cancel = () => { running = false; deferred.reject(); };

  function getFrame() {
    if (running && (!duration || lastTime <= duration))
      window.requestAnimationFrame(getFrame);

    const time = Date.now() - startTime;
    callback(duration ? Math.min(1,time/duration) : time, time - lastTime, cancel);
    if (duration && time >= duration) deferred.resolve();
    lastTime = time;
  }

  getFrame();
  return {cancel, then, promise: deferred.promise};
}

export function animate(callback: AnimationCallback,
                        duration?: number): AnimationResponse {
  if (duration === 0) {
    callback(1, 0, () => {});
    return ResolvedAnimation;
  }

  const startTime = Date.now();
  const deferred = defer();

  let lastTime = 0;
  let running = true;

  const cancel = () => {
    running = false;
    deferred.reject();
  };

  function getFrame() {
    if (running && (!duration || lastTime <= duration))
      window.requestAnimationFrame(getFrame);

    const time = Date.now() - startTime;
    callback(duration ? Math.min(1, time / duration) : time, time - lastTime,
        cancel);