我的代碼在本地和Codepen或plunker中執行的方式不同

Question

我有使用jQuery Terminal這樣的代碼：

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中放入flush時，它起作用：

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

當我在本地服務器中運行相同的代碼（沒有setTimeout）時，它可以正常工作。 我還嘗試將代碼嵌入到iframe中，並且也可以按預期運行。 另外，當我執行命令顯示（鍵入顯示並按Enter）時，已執行的命令和提示會添加到末尾（在echo添加的行之后），但是當我調整窗口大小時，它們會按需放置在行之前。

有人知道為什么會這樣嗎？ 為什么在本地和在Codepen中執行的代碼不同？

我試圖在jquery.terminal-src.js文件中設置斷點，但沒有弄清楚為什么flush不會顯示行。 當我逐步執行代碼時，似乎在調用flush時output_buffer數組為空，但是當我調整窗口大小並執行resize方法時，代碼以某種方式顯示。

Answer 1

我相信這是因為echo函數是異步的。 它在內部使用Deferred ，並記錄為

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

在競態條件下，由於Codepen的開銷（由Codepen執行的生成代碼：請注意window.CP行會自動添加）

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);

然后發生的情況是， 在調用flush 之后， “立即”執行但對異步執行的echo的JQuery Deferred resolve被觸發。 因此，當時沖洗不會沖洗任何東西。

設置setTimeout將flush setTimeout隊列，使其在 echo 之后發生。

我認為，如果他們將deferd用於回顯（或任何方法），則應對齊所有方法。 因此，刷新還應使用deferred，然后將其排隊並按順序解決。

調整窗口大小只是在之后強制刷新，因此才顯示窗口。

順便說一下，對象的創建似乎也被推遲了。 因此，如果在show方法中使用變量term （而不是在setTimeout中），則會注意到該變量term尚未初始化，並會導致錯誤。 這意味着show函數在變量賦值之前被調用。 這是造成異步混亂的另一個原因。