我的代码在本地和在 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里面在我水平调整浏览器 window 之前，线条不会显示出来。当我将 flush 放入 setTimeout 0:

时它起作用了

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

当我在本地服务器中运行相同的代码（没有setTimeout）时它工作正常。我还尝试将代码嵌入到 iframe 中，它也按预期运行。还有其他事情，当我执行命令 show（键入 show 并按 enter）时，执行的命令和提示被添加到末尾（在 echo 添加的行之后）但是当我调整 window 的大小时，它们被放置在行之前他们应该这样做。

有人知道为什么会这样吗？为什么代码在本地和在 codepen 中执行不同？

我曾尝试在 jquery.terminal-src.js 文件中设置断点，但没有弄清楚为什么 flush 不显示行。当我逐步执行代码时，调用 flush 时 output_buffer 数组似乎为空，但是当我调整 window 的大小时并执行调整大小方法时，不知何故出现了这些行。

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

然后 resolve 的 JQuery Deferred 的 echo 执行 "immediately" 但异步触发在调用flush之后。因此，冲洗当时什么也没有冲洗。

设置 setTimeout 对 flush 进行排队，使其在 echo.

之后发生

在我看来，如果他们将 deferred 用于 echo（或任何方法），他们应该对齐所有方法来这样做。因此，flush 也应该使用 deferred，然后将其排队并按顺序解析。

调整 window 的大小只是在之后强制刷新，这就是它显示的原因。

顺便说一下，对象的创建似乎也被推迟了。因此，如果您在 show 方法（而不是在 setTimeout 中）中使用变量 term，您会注意到它尚未初始化并会导致错误。这意味着在变量赋值之前调用 show 函数。这是异步混淆的另一个原因。

我的代码在本地和在 codepen 或 plunker 中的执行方式不同

My code is not executed the same locally and in codepen or plunker

javascript

jquery

jquery-terminal

codepen