JavaScript：コールバックで外界に影響を与えるには？

Question

私のノードスクリプトはXHTML文書をインポートし、Caliberのebook-convertユーティリティを使用してeBook形式でエクスポートします。そのすべてがうまく動作します。

一部のソースドキュメントには、他のXHTMLコンテンツに加えてMathMLマークアップが含まれています。私はmathjax-node-svg2pngと一緒にMathJax-nodeを使ってMathMLを画像に置き換えようとしています。

ここに私のダムのコードの一部です：私はこれが二回出力をログに記録する理由を理解し、コンテンツを更新せず、私はすべてを交換するために一緒にすべてを引っ張っするかどうかはわかりません

let einstein = ` 
<blockquote class='eqtn'> 
    <p>We will now prove the Pythogorian theorem: <mml:math> <mrow> <msup><mi> a </mi><mn>2</mn></msup> <mo> + </mo> <msup><mi> b </mi><mn>2</mn></msup> <mo> = </mo> <msup><mi> c </mi><mn>2</mn></msup> </mrow> </mml:math></p> 
</blockquote> 
<blockquote> 
    <p><mml:math><mrow><mi>e</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow></mml:math></p> 
</blockquote> 
    `; 

const re = /(\<mml:math.*?\<\/mml:math\>)/g; 

var equations = einstein.match(re); 

equations.forEach(equation => { 

    mjAPI.typeset({ 
    math: equation, 
    format: 'MathML', 
    png: true, 
    scale: 2 
    }, function(data) { 

    if(!data.errors) { 

     const imageTag = `<img alt="${data.speakText}" src="${data.png}" width="80%"/>`; 

     console.log(einstein.replace(equation, imageTag)); // This logs the string 
     // twice, each time with a different **single** equation replaced with 
     // an image tag. 

    } 

    }); 

}); 

それが非同期であるとすれば、画像を含む方程式。正しい方向で私を指し示す文書はありますか？

Answer 1

これにはいくつかの方法があります。ある変更が別の変更に影響を及ぼす可能性がある場合は、一度に1つずつ行うこともできます。

しかし、非同期に言及しているので、私はそれらが互いに衝突しないと推測しているので、あなたはそれらを並行して行うことができます。

einstein = einstein.replace(equation, imageTag)); 
console.log(einstein); 

einstein.replace()新しい文字列を返しますが、変数に割り当て直す必要がありますので、：あなたconsole.logそれは前に

あなたは自分の値を格納することができます。

しかし、この場合、私がやることは、一連の置換えを構築してから、置換えを一度に適用することです。その場合、完了した時点を知る必要があります。そのためには、何らかのカウンターを持っていると助かります。

let einstein = ` 
<blockquote class='eqtn'> 
    <p>We will now prove the Pythogorian theorem: <mml:math> <mrow> <msup><mi> a </mi><mn>2</mn></msup> <mo> + </mo> <msup><mi> b </mi><mn>2</mn></msup> <mo> = </mo> <msup><mi> c </mi><mn>2</mn></msup> </mrow> </mml:math></p> 
</blockquote> 
<blockquote> 
    <p><mml:math><mrow><mi>e</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow></mml:math></p> 
</blockquote> 
    `; 

const re = /(\<mml:math.*?\<\/mml:math\>)/g; 

var equations = einstein.match(re); 

var equationsDone = 0; 
var replacements = {}; 
equations.forEach(equation => { 

    mjAPI.typeset({ 
    math: equation, 
    format: 'MathML', 
    png: true, 
    scale: 2 
    }, function(data) { 

    if(!data.errors) { 

     const imageTag = `<img alt="${data.speakText}" src="${data.png}" width="80%"/>`; 

     replacements[equation] = imageTag; 
     equationsDone++; 

     if (equationsDone === equations.length) { 
     applyReplacements(); 
     } 
    } 

    }); 

}); 

function applyReplacements() { 
    for (var equation in replacements) { 
    einstein = einstein.replace(equation, replacements[equation]); 
    } 

    console.log(einstein); 
} 

これは、コールバックが呼び出されるたびに、後で適用できるオブジェクトに置き換えられます。また、処理した数を把握するために使用するカウンタも増やしています。 equation.lengthを処理したら、すべて完了したので、次のステップに進んで適用することができます。

これらを適用するには、オブジェクトのキー（私たちの方程式です）をループして置き換えます。そこから、einsteinを手に入れて、それ以外の何かをしたいと思うでしょう。

私がこのようにするのは、置換えを行うときにもっとコントロールできて、一度に1つのアクションを実行できるからです。この特別なコントロールは、あなたのユースケースでは過度のものかもしれませんが、役に立つかもしれません。また、元の文字列を変更したり、新しい文字列を作成して代わりにコールバックに渡したりすることもできます。