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

【问题标题】：My code is not executed the same locally and in codepen or plunker我的代码在本地和在 codepen 或 plunker 中的执行方式不同
【发布时间】：2016-12-10 13:04:39
【问题描述】：

我有这样的代码使用 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 （键入 show 并按 enter）时，执行的命令和提示会添加到末尾（在 echo 添加的行之后），但是当我调整窗口大小时，它们应该放在行之前。

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

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

【问题讨论】：

看起来如果您在echo 调用中将flush: false 更改为flush: true，就会显示这些行...
@MikeMcCaughan 是的，但它会调用flush，浏览器会在每次回显后重新绘制，我想要一次刷新一次重新绘制。

标签： javascript jquery jquery-terminal codepen

【解决方案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);

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

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

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

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

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

【讨论】：