时间戳

首页 > 解决方案 > Javascript中的伪同步编程，但是有更好的实现吗？

javascript - Javascript中的伪同步编程，但是有更好的实现吗？

问题描述

我有一个面向幼儿（8-10 岁）的 JavaScript 编码课程原型，它基于动画。教学脚本允许其用户同步编程，例如

draw(something);
wait(some time); 
draw(something_else);

同步编程看起来比常规的 JavaScript 技术友好得多，但在幕后是 async/await，它不会让浏览器陷入困境。

您可以在http://codepegs.com/尝试它的工作原理，并在http://codepegs.com/cphelp.html找到解释（滚动到定时函数）。

async/await 非常克制。可以做的还有很多，但在重构系统之前，让我问一下您是否知道现有的 JavaScript 伪同步编程解决方案，我可以使用它吗？

我试图搜索，答案就像不可能。这就是为什么我链接了一个例子。

PS：对不起，我必须添加一个帖子脚本。我要求提出一个更详细的实施方案。原则上，它是在一年前完成的。这很粗糙，但它有效。我不喜欢它有很多原因，但我决定在开始新一轮编程之前先问问。

看，在脚本（或拼写）完成运行（异步）后，它会留下要按时执行的函数序列，以这种或另一种方式。使用这样的列表可以完成很多事情。假设你想取消一些挂起的函数，或者你想重复它们，也许改变一些东西等等。这个伪同步模型并不是非常复杂，但也不是那么简单。想象一下你想要一个无限的动画（这是实现的，但是以一种笨拙的方式）等等。

标签： javascriptasynchronoussynchronous

解决方案

正如 Bergi 所建议的那样，以同步方式实际运行代码并将所有更改推送到队列中可能会更优雅，然后您可以慢慢重播更改：

  const queue = [];

  function draw(text) { queue.push({command: "draw", value: text }); }
  function wait(value) { queue.push({ command: "delay", value }); }

  async function end() {
    for(const { command, value } of queue) {
       switch(command) {
          case "draw":
            console.log(value);
            break;
         case "delay":
            await new Promise(res => setTimeout(res, value));
            break;
      }
   }
}

// Your code:
draw("And you get...");
wait(1000);
draw("nothing :/");
end();

推荐阅读