fix(scheduler): handle queueJob inside postFlushCbs

This commit is contained in:
Evan You 2018-10-28 12:08:58 -04:00
parent 01bb8d1894
commit ebf67ad208
2 changed files with 74 additions and 10 deletions

View File

@ -90,4 +90,27 @@ describe('scheduler', () => {
await nextTick() await nextTick()
expect(calls).toEqual(['job1', 'job2']) expect(calls).toEqual(['job1', 'job2'])
}) })
it('queueJob inside postFlushCb', async () => {
const calls: any = []
const job1 = () => {
calls.push('job1')
}
const cb1 = () => {
// queue another job in postFlushCb
calls.push('cb1')
queueJob(job2, cb2)
}
const job2 = () => {
calls.push('job2')
}
const cb2 = () => {
calls.push('cb2')
}
queueJob(job1, cb1)
queueJob(job2, cb2)
await nextTick()
expect(calls).toEqual(['job1', 'job2', 'cb1', 'cb2', 'job2', 'cb2'])
})
}) })

View File

@ -1,33 +1,74 @@
const queue: Array<() => void> = [] const queue: Array<() => void> = []
const postFlushCbs: Array<() => void> = [] const postFlushCbs: Array<() => void> = []
const postFlushCbsForNextTick: Array<() => void> = []
const p = Promise.resolve() const p = Promise.resolve()
let hasPendingFlush = false let isFlushing = false
let isFlushingPostCbs = false
export function nextTick(fn?: () => void): Promise<void> { export function nextTick(fn?: () => void): Promise<void> {
return p.then(fn) return p.then(fn)
} }
export function queueJob(job: () => void, postFlushCb?: () => void) { export function queueJob(
job: () => void,
postFlushCb?: () => void,
onError?: (err: Error) => void
) {
if (queue.indexOf(job) === -1) { if (queue.indexOf(job) === -1) {
queue.push(job) queue.push(job)
if (!hasPendingFlush) { if (!isFlushing || isFlushingPostCbs) {
hasPendingFlush = true const p = nextTick(flushJobs)
nextTick(flushJobs) if (onError) p.catch(onError)
} }
} }
if (postFlushCb && postFlushCbs.indexOf(postFlushCb) === -1) { if (postFlushCb) {
postFlushCbs.push(postFlushCb) if (isFlushingPostCbs) {
// it's possible for a postFlushCb to queue another job/cb combo,
// e.g. triggering a state update inside the updated hook.
if (postFlushCbsForNextTick.indexOf(postFlushCb) === -1) {
postFlushCbsForNextTick.push(postFlushCb)
}
} else if (postFlushCbs.indexOf(postFlushCb) === -1) {
postFlushCbs.push(postFlushCb)
}
} }
} }
const seenJobs = new Map()
const RECURSION_LIMIT = 100
function flushJobs() { function flushJobs() {
seenJobs.clear()
isFlushing = true
let job let job
while ((job = queue.shift())) { while ((job = queue.shift())) {
if (__DEV__) {
if (!seenJobs.has(job)) {
seenJobs.set(job, 1)
} else {
const count = seenJobs.get(job)
if (count > RECURSION_LIMIT) {
throw new Error('Maximum recursive updates exceeded')
} else {
seenJobs.set(job, count + 1)
}
}
}
job() job()
} }
while ((job = postFlushCbs.shift())) { isFlushingPostCbs = true
job() if (postFlushCbsForNextTick.length > 0) {
const postFlushCbsFromPrevTick = postFlushCbsForNextTick.slice()
postFlushCbsForNextTick.length = 0
for (let i = 0; i < postFlushCbsFromPrevTick.length; i++) {
postFlushCbsFromPrevTick[i]()
}
} }
hasPendingFlush = false for (let i = 0; i < postFlushCbs.length; i++) {
postFlushCbs[i]()
}
postFlushCbs.length = 0
isFlushingPostCbs = false
isFlushing = false
} }