This section describes the nextTick() function

From the responsive principle of sending out notifications, we know that changes in data toDOMUpdating is an asynchronous process,nextTickHow is it guaranteed to be nexttickExecute all callbacks?

Next, let’s look at the nextTick() function implementation, which is implemented in a single JS file with less than a hundred lines of code. Let’s first look at the function definition, as shown below.

const callbacks = []
let pending = false
Copy the code
function nextTick (cb, CTX) {let _resolve // push an anonymous function containing cb into the callbacks array // Promise. Resolve as a callback to the push array callbacks.push(() => { if (cb) { try { cb.call(ctx) } catch (e) { handleError(e, ctx, 'nextTick')}} else if (_resolve) {_resolve(CTX)}}) // Pending flag ensures that timerFunc() if (! Resolve (); // return a Promise instance. Accept the result of _resolve() with promise.then() if (! cb && typeof Promise ! == 'undefined') { return new Promise(resolve => { _resolve = resolve }) } }Copy the code

As you can see from the above code, in the nextTick() function

  • First, the callback functioncbWrapped in an anonymous function, and then anonymous functionpush 到 callbacksIn the queue.
  • If no callback function is receivedcbParameter, then the variable_resolveExecutes as a function inside an anonymous function, and then anonymizes the functionpush 到 callbacksIn the queue. Due to thecbDoes not exist, so variable_resolveTo be an assignmentPromise.resolve()Function, andnextTick()The function returns aPromiseExample, so:this.$nextTick().then()
  • Pass flag bitpendingMake sure to do it multiple timesnextTick()Function, which is executed only oncetimerFunc()Function. So let’s focus on thattimerFunc()The implementation of a function.

Next analysis timerFunc() function implementation, this process involves JS operating mechanism, you can baidu oh!

How does the timerFunc() function execute all callbacks only on the nextTick, even though it calls nextTick() multiple times?

The function is mainly realized by macro/micro tasks, and can also be temporarily understood as realized by delay functions. The specific code is as follows:

  • To look at firstPromiseWhether to define, if defined, microtaskp.then()
  • Take a look atsetImmediate()If a function is defined, non-standard features are not recommendedsetTimeout(fn, 0)To mimic this feature.
  • Direct use ofsetTimeout(fn, 0)Function to implement.
let timerFunc; if (typeof Promise ! == "undefined") { const p = Promise.resolve() timerFunc = () => { p.then(flushCallbacks) } } else if (typeof setImmediate ! == "undefined") { timerFunc = () => { setImmediate(flushCallbacks) } } else { timerFunc = () => { setTimeout(flushCallbacks, 0) } }Copy the code

The timerFunc() function is simply a way to delay the execution of the flushCallbacks() function. Within this function, we first shallow copy the array callbacks that store the function, and then reset pending and callbacks data. The last iteration of the array executes the function. The code is as follows:

function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}
Copy the code