我的代码在本地和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函数在变量赋值之前被调用。 这是造成异步混乱的另一个原因。