Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Asap and AnimationFrame Schedulers execute synchronously #1814

Closed
trxcllnt opened this issue Jul 9, 2016 · 1 comment
Closed

Asap and AnimationFrame Schedulers execute synchronously #1814

trxcllnt opened this issue Jul 9, 2016 · 1 comment

Comments

@trxcllnt
Copy link
Member

trxcllnt commented Jul 9, 2016

RxJS version:
All

Code to reproduce:

Expand to see the example code or run it in esnextb.in here

import { Scheduler } from 'rxjs';

const root = getRootDiv();
const rect = { x: 0, y: 0, w: 200, h: 200};
const box1 = root.appendChild(createBox());
const box2 = root.appendChild(createBox());
const scheduler = Scheduler.animationFrame;

scheduler.schedule(moveBox(box1), 0, {
    ...rect,
    tx: 0, ty: 0,
    ix: rect.w / (rect.w * 2),
    iy: rect.h / (rect.h * 2),
});

scheduler.schedule(moveBox(box2), 0, {
    tx: 0, ty: 0,
    x: rect.w, y: rect.h,
    ix: -1 * rect.w / (rect.w * 2),
    iy: -1 * rect.h / (rect.h * 2),
});

function moveBox(box) {
    return function(state) {
        const { x, y, tx, ty } = state;
        if (tx < rect.w && ty < rect.h) {
            box.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
            state.x = x + state.ix;
            state.y = y + state.iy;
            state.tx = tx + Math.abs(state.ix);
            state.ty = ty + Math.abs(state.iy);
            this.schedule(state);
        }
    }
}

function createBox(parent) {
  const box = document.createElement('div');
  box.style.width = `${rect.w}px`;
  box.style.height = `${rect.h}px`;
  box.style.opacity = 0.25;
  box.style.background = '#000000';
  box.style.position = 'absolute';
  return box;
}

function getRootDiv(root) {
  root = (
    document.getElementById('root') ||
    document.body.appendChild((
      root = document.createElement('div')) && (
      root.id = 'root') && (
      root)
    )
  );
  root.style.top = 0;
  root.style.left = 0;
  root.style.right = 0;
  root.style.bottom = 0;
  root.style.overflow = 'hidden';
  root.style.position = 'absolute';
  root.style['transform-style'] = 'preserve-3d';
  return root;
}

Expected behavior:
The boxes should animate by repeated calls to setImmediate or requestAnimationFrame.

Actual behavior:
They don't. Instead, one call to setImmediate or requestAnimationFrame happens, then the actions reschedule themselves synchronously.

Additional information:
I've fixed this in a branch and will have a PR once I've worked out the performance regressions.

@trxcllnt trxcllnt changed the title Asap and AnimationFrame Scheduler execute synchronously Asap and AnimationFrame Schedulers execute synchronously Jul 9, 2016
trxcllnt added a commit to trxcllnt/rxjs that referenced this issue Jul 9, 2016
…ross their respective async bou

The AsapScheduler and AnimationFrameSchedulers were totally busted. My bad. Now they execute their
scheduled actions in batches, but if actions reschedule while executing a batch, a new frame is
requested for the rescheduled action to execute in.

ReactiveX#1814
trxcllnt added a commit to trxcllnt/rxjs that referenced this issue Jul 11, 2016
…ross async boundaries.

The AsapScheduler and AnimationFrameSchedulers were totally busted. My bad. Now they execute their
scheduled actions in batches, but if actions reschedule while executing a batch, a new frame is
requested for the rescheduled action to execute in.

Fixes ReactiveX#1814
trxcllnt added a commit to trxcllnt/rxjs that referenced this issue Jul 11, 2016
…ross async boundaries.

The AsapScheduler and AnimationFrameSchedulers were totally busted. My bad. Now they execute their scheduled actions in batches. If actions reschedule while executing a batch, a new frame is requested for the rescheduled action to execute in.

This PR also simplifies the public `Scheduler` and `Action` APIs. Implementation details like the `actions` queue and `active` boolean are now on the concrete implementations, so it's easier for people to implement the Scheduler API. This PR also renames `FutureAction` -> `AsyncAction` to conform to the same naming convention as the rest of the Action types.

Fixes ReactiveX#1814
trxcllnt added a commit to trxcllnt/rxjs that referenced this issue Jul 11, 2016
…ross async boundaries.

The AsapScheduler and AnimationFrameSchedulers were totally busted. My bad. Now they execute their scheduled actions in batches. If actions reschedule while executing a batch, a new frame is requested for the rescheduled action to execute in.

This PR also simplifies the public `Scheduler` and `Action` APIs. Implementation details like the `actions` queue and `active` boolean are now on the concrete implementations, so it's easier for people to implement the Scheduler API. This PR also renames `FutureAction` -> `AsyncAction` to conform to the same naming convention as the rest of the Action types.

Fixes ReactiveX#1814
trxcllnt added a commit to trxcllnt/rxjs that referenced this issue Jul 11, 2016
…ross async boundaries.

The AsapScheduler and AnimationFrameSchedulers were totally busted. My bad. Now they execute their scheduled actions in batches. If actions reschedule while executing a batch, a new frame is requested for the rescheduled action to execute in.

This PR also simplifies the public `Scheduler` and `Action` APIs. Implementation details like the `actions` queue and `active` boolean are now on the concrete implementations, so it's easier for people to implement the Scheduler API. This PR also renames `FutureAction` -> `AsyncAction` to conform to the same naming convention as the rest of the Action types.

Fixes ReactiveX#1814
trxcllnt added a commit to trxcllnt/rxjs that referenced this issue Jul 12, 2016
…ross async boundaries.

The AsapScheduler and AnimationFrameSchedulers were totally busted. My bad. Now they execute their scheduled actions in batches. If actions reschedule while executing a batch, a new frame is requested for the rescheduled action to execute in.

This PR also simplifies the public `Scheduler` and `Action` APIs. Implementation details like the `actions` queue and `active` boolean are now on the concrete implementations, so it's easier for people to implement the Scheduler API. This PR also renames `FutureAction` -> `AsyncAction` to conform to the same naming convention as the rest of the Action types.

Fixes ReactiveX#1814
trxcllnt added a commit to trxcllnt/rxjs that referenced this issue Jul 13, 2016
…ross async boundaries.

The AsapScheduler and AnimationFrameSchedulers were totally busted. My bad. Now they execute their scheduled actions in batches. If actions reschedule while executing a batch, a new frame is requested for the rescheduled action to execute in.

This PR also simplifies the public `Scheduler` and `Action` APIs. Implementation details like the `actions` queue and `active` boolean are now on the concrete implementations, so it's easier for people to implement the Scheduler API. This PR also renames `FutureAction` -> `AsyncAction` to conform to the same naming convention as the rest of the Action types.

Fixes ReactiveX#1814
benlesh pushed a commit that referenced this issue Jul 16, 2016
…ross async boundaries. (#1820)

The AsapScheduler and AnimationFrameSchedulers were totally busted. My bad. Now they execute their scheduled actions in batches. If actions reschedule while executing a batch, a new frame is requested for the rescheduled action to execute in.

This PR also simplifies the public `Scheduler` and `Action` APIs. Implementation details like the `actions` queue and `active` boolean are now on the concrete implementations, so it's easier for people to implement the Scheduler API. This PR also renames `FutureAction` -> `AsyncAction` to conform to the same naming convention as the rest of the Action types.

Fixes #1814
@lock
Copy link

lock bot commented Jun 7, 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked as resolved and limited conversation to collaborators Jun 7, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant