私のコードは、ローカルで同じことを実行してcodepenまたはplunker

Question

に私はこの使用してjQueryのターミナルのようなコードを持っていません。

function show() { 
    for (var i = 0; i < 100; ++i) { 
     this.echo('line ' + i, { 
      flush: false 
     }); 
    } 
    this.flush(); 
    setTimeout(function() { 
     //this.flush(); 
    }, 0); 
} 

var term = $('body').terminal({ 
    show: show 
}, { 
    onBlur: function() { 
     return false; 
    }, 
    onInit: function(term) { 
     show.apply(term); 
    } 
}); 

と私は水平に、ブラウザのサイズを変更するまでのラインが表示されていない このcodepen内部を窓。私はsetTimeoutを0にフラッシュ入れたとき これは動作：

setTimeout(function() { 
    term.flush(); 
}, 0); 

私はローカルサーバに（setTimeoutをせずに）同じコードを実行したときにそれが正常に動作します。私はまた、iframeにコードを埋め込もうとしました。また、期待どおりに動作します。そして、コマンドshowを実行すると、実行されたコマンドとプロンプトは最後に追加されます（エコーで追加された行の後にあります）が、ウィンドウのサイズを変更すると、行の前に配置されます。

誰もが、なぜこれが起こっているのかを知っていますか？コードがローカルで異なるコードを実行するのはなぜですか？

私はjquery.terminal-src.jsファイルにブレークポイントを設定するのをやめましたが、なぜフラッシュで行が表示されないのか分かりませんでした。コードをステップ実行すると、flushが呼び出されたときにoutput_buffer配列が空であるように見えますが、ウィンドウのサイズを変更してメソッドのサイズを変更すると何とか行が表示されます。

Answer 1

これは、echo関数が非同期であるためです。それは、内部Deferredを使用しCodepenオーバーヘッド（codepenによって実行される生成されたコード：window.CP行が自動的に追加注意）による競合状態で

// :: it use $.when so you can echo a promise 
// ------------------------------------------------------------- 
echo: function(string, options) { 

として記載されて

for (var i = 0; i < 100; ++i) { 
    if (window.CP.shouldStopExecution(1)) { 
     break; 
    } 
    this.echo('line ' + i, { flush: false }); 
} 
this.flush(); 
setTimeout(function() { 
}, 0); 
window.CP.exitedLoop(1); 

が、それはresolveこと起こります「即時」に実行されるが、まだ非同期的に実行されるechoのJQuery Deferredのの後にflushを呼び出すと、が発生する。したがって、フラッシュはその時何もフラッシュしない。それはecho後起こるflushようsetTimeoutキューを設定する

。

私の意見では、エコー（または任意の方法）のために遅延を使用する場合は、すべての方法を調整する必要があります。したがって、フラッシュは遅延されたものを使用して、キューに入れられ、順番に解決されます。

ウィンドウのサイズを変更すると、あとで強制的に強制的に強制終了するので、それが表示されます。

ところで、オブジェクトの作成も遅れているようです。したがって、termを（setTimeoutではなく）showメソッドで使用すると、まだ初期化されていないことがわかり、エラーが発生します。つまり、show関数は変数代入の前に呼び出されます。非同期の混乱のもう一つの原因です。