javascript - 我的代码在本地和在 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 里面 在我水平调整浏览器窗口的大小之前，线条不会显示出来。 当我将 flush 放入 setTimeout 0 时它起作用了:

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

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

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

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

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

然后碰巧 echo 的 JQuery Deferred 的 resolve 被“立即”执行但异步被触发 在调用flush之后。因此，冲洗在那个时候不会冲洗任何东西。

设置 setTimeout 对 flush 进行排队，使其在 echo 之后发生。

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

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

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