Vue 中 MathJax 的使用与渲染的监听 (下)

本文作者：傅云贵（网易有道技术团队）

在上一篇文章 (见 Vue 中 MathJax 的使用与渲染的监听 (上) ) 中讲述了在 Vue 组件中如何使用 MathJax，却应对不了产品的新需求:

待 MathJax 渲染(Typeset)数学公式后，用户使用浏览器的打印功能打印网页。

在此需求中，需要判断所有组件实例的 MathJax Typeset 是否完成。

如何监听所有组件实例中的 MathJax Typeset 是否完成呢？

组件 typeset 渲染的监听初步实现

根据「分而治之」的思想，很容易想到：若要判断多个组件实例是否 MathJax typeset 完成，只要判断每一个组件实例是否 MathJax typeset 完成。

在组件中，我们可以使用以下方法监听 MathJax Typeset 是否完成。

@Component({})
class SomeComponent extends Vue {
    private mathJax: typeof MathJax | null = null

    private needTypeset: boolean = false

    isTypesetFinished: boolean = false

    private callMathJaxTypeset(): void {
        const { mathJax } = this
        if (mathJax) {
            const { typesetElement } = this.$refs
            mathJax.Hub.Queue(['Typeset', MathJax.Hub, typesetElement])
            mathJax.Hub.Queue(() => {
                this.isTypesetFinished = true
            })
        } else {
            this.needTypeset = true
        }
    }

    created(): void {
        const mathJax = await loadMathJax()
        this.mathJax = mathJax

        if (this.needTypeset) {
            this.callMathJaxTypeset()
        }
    }

    mounted(): void {
        this.isTypesetFinished = false
        this.callMathJaxTypeset()
    }

    updated(): void {
        this.isTypesetFinished = false
        this.callMathJaxTypeset()
    }
}

MathJax.Hub.Queue 深入了解

在组件实现 MathJax Typeset 是否完成过程中，使用了MathJax.Hub.Queue, 那么这个 Queue 究竟是什么呢？

翻阅 MathJax 的源码，可以发现 MathJax.Hub.Queue 源于 MathJax.Callback.Queue。

// ...

var QUEUE = BASE.Object.Subclass({
    //
    //  Create the queue and push any commands that are specified
    //
    Init: function() {
        // ...
    },
    //
    //  Add commands to the queue and run them. Adding a callback object
    //  (rather than a callback specification) queues a wait for that callback.
    //  Return the final callback for synchronization purposes.
    //
    Push: function() {
        //...
    },
    //
    //  Process the command queue if we aren't waiting on another command
    //
    Process: function(queue) {
        // ...
    },
    //
    //  Suspend/Resume command processing on this queue
    //
    Suspend: function() {
        // ...
    },
    Resume: function() {
        // ...
    },
    //
    //  Used by WAITFOR to restart the queue when an action completes
    //
    call: function() {
        // ...
    },
    wait: function(callback) {
        // ...
    },
})
// ...

BASE.Callback.Queue = QUEUE

// ...

var HUB = BASE.Hub

// ...

HUB.queue = BASE.Callback.Queue()

MathJax.Hub = {
    // ...
    Queue: function() {
        return this.queue.Push.apply(this.queue, arguments)
    },
    //...
}

MathJax.Callback.Queue

A “callback” is a function that MathJax calls when it completes an action that may occur asynchronously (like loading a file). Many of MathJax’s functions operate asynchronously, and MathJax uses callbacks to allow you to synchronize your code with the action of those functions. The MathJax.Callback structure manages these callbacks.

MathJax.Callback.Queue 是一个队列，负责管理一系列 callback (即任务）的执行。MathJax.Hub.Queue 可以理解为 MathJax.Callback.Queue 的一个实例。

初步实现 typeset 渲染监听可能存在的问题

由于 MathJax.Hub.Queue 中 callback 是存储在队列的，并不会立即执行；且在实际使用过程发现, typeset 渲染数学公式过程并不太快。那么，组件 typeset 渲染的监听初步实现 章节中的实现，在多组件实例、多次updated的情况下，MathJax.Hub.Queue 中等待任务可能会出现以下情况:

<

序号	MathJax.Hub.Queue 中等待的任务
…	…
N+1	someComponent1 typeset callback