我正在使用Blockly构建一个海龟图形应用程序。用户可以从块中构建代码，然后Blockly引擎生成JS代码，绘制到画布上。
Blockly引擎生成JS代码，但将其作为字符串返回，我必须使用eval()来绘制到画布上。
我可以更改块的代码以生成不同的输出，但是尽可能保持简单很重要，因为用户可以读取块输入后面的实际代码。因此，我不想弄糊它。
我对原子操作（go、turn等）具有完全控制权，因此我想在函数开头插入一小段代码，延迟执行其余函数体的代码。类似于：
function go(dir, dist) {
// wait here a little
// do the drawing
}
我认为应该是一些同步的东西，可以保持执行流程中的延迟。我尝试过使用setTimeout（异步，失败），promise（失败），循环中的时间戳检查（失败）。
在JS中是否可能实现？
您不能同步等待代码执行。唯一的结果就是冻结浏览器窗口。
您需要使用JS解释器，而不是使用eval函数。这样您可以暂停代码执行，播放动画，突出显示正在执行的块等。该教程有许多示例可帮助您入门。以下是一个基于JS解释器示例的可工作代码：
var workspace = Blockly.inject("editor-div", {
toolbox: document.getElementById('toolbox')
});
Blockly.JavaScript.STATEMENT_PREFIX = 'highlightBlock(%1);\n';
Blockly.JavaScript.addReservedWords('highlightBlock');
Blockly.JavaScript['text_print'] = function(block) {
var argument0 = Blockly.JavaScript.valueToCode(
block, 'TEXT',
Blockly.JavaScript.ORDER_FUNCTION_CALL
) || '\'\'';
return "print(" + argument0 + ');\n';
};
function run() {
var code = Blockly.JavaScript.workspaceToCode(workspace);
var running = false;
workspace.traceOn(true);
workspace.highlightBlock(null);
var lastBlockToHighlight = null;
var myInterpreter = new Interpreter(code, (interpreter, scope) => {
interpreter.setProperty(
scope, 'highlightBlock',
interpreter.createNativeFunction(id => {
id = id ? id.toString() : '';
running = false;
workspace.highlightBlock(lastBlockToHighlight);
lastBlockToHighlight = id;
})
);
interpreter.setProperty(
scope, 'print',
interpreter.createNativeFunction(val => {
val = val ? val.toString() : '';
console.log(val);
})
);
});
var intervalId = setInterval(() => {
running = true;
while (running) {
if (!myInterpreter.step()) {
workspace.highlightBlock(lastBlockToHighlight);
clearInterval(intervalId);
return;
}
}
}, 500);
}#editor-div {
width: 500px;
height: 150px;
}<script src="https://rawgit.com/google/blockly/master/blockly_compressed.js"></script>
<script src="https://rawgit.com/google/blockly/master/blocks_compressed.js"></script>
<script src="https://rawgit.com/google/blockly/master/javascript_compressed.js"></script>
<script src="https://rawgit.com/google/blockly/master/msg/js/en.js"></script>
<script src="https://rawgit.com/NeilFraser/JS-Interpreter/master/acorn_interpreter.js"></script>
<xml id="toolbox" style="display: none">
<block type="text"></block>
<block type="text_print"></block>
<block type="controls_repeat_ext"></block>
<block type="math_number"></block>
</xml>
<div>
<button id="run-code" onclick="run()">run</button>
</div>
<div id="editor-div"></div>编辑
添加了变量running来控制解释器。现在，它会一直执行，直到running变量被设置为false，所以highlightBlock函数中的running = false语句基本上可以作为断点。
编辑
引入了lastBlockToHighlight变量来延迟高亮显示，因此最新的运行语句会被突出显示，而不是下一个语句。不幸的是，JavaScript代码生成器没有类似于STATEMENT_PREFIX的STATEMENT_SUFFIX配置。
以下是演示的gif动画。
这是一种与普通使用Blockly不同且简化的方法。
首先，你需要定义块 (请参阅文档中的定义方法)。你不需要定义任何代码生成器，所有关于代码生成的内容都由库执行。
每个块生成一个请求。
// the request
{ method: 'TURN', args: ['RIGHT'] }
class Game{
manageRequests(request){
// requests are passed here
if(request.method == 'TURN')
// animate your sprite
turn(request.args)
}
}
class Game{
async manageRequests(request){
if(request.method == 'TURN')
await turn(request.args)
}
}
游戏块与您的游戏之间的链接由游戏手柄管理。
let gamepad = new Blockly.Gamepad(),
game = new Game()
// requests will be passed here
gamepad.setGame(game, game.manageRequest)
// load the code from the blocks in the workspace
gamepad.load()
// reset the code loaded previously
gamepad.reset()
// the blocks are executed one after the other
gamepad.play()
// play in reverse
gamepad.play(true)
// the blocks execution is paused
gamepad.pause()
// toggle play
gamepad.togglePlay()
// load the next request
gamepad.forward()
// load the prior request
gamepad.backward()
// use a block as a breakpoint and play until it is reached
gamepad.debug(id)
您可以构建一个新类来处理执行go(dir, dist)函数，并覆盖go函数以在执行器中创建新的go。
function GoExecutor(){
var executeArray = []; // Store go methods that waiting for execute
var isRunning = false; // Handle looper function
// start runner function
var run = function(){
if(isRunning)
return;
isRunning = true;
runner();
}
// looper for executeArray
var runner = function(){
if(executeArray.length == 0){
isRunning = false;
return;
}
// pop the first inserted params
var currentExec = executeArray.shift(0);
// wait delay miliseconds
setTimeout(function(){
// execute the original go function
originalGoFunction(currentExec.dir, currentExec.dist);
// after finish drawing loop on the next execute method
runner();
}, currentExec.delay);
}
this.push = function(dir, dist){
executeArray.push([dir,dist]);
run();
}
}
// GoExecutor instance
var goExec = new GoExecutor();
// Override go function
var originalGoFunction = go;
var go = function (dir, dist, delay){
goExec.push({"dir":dir, "dist":dist, "delay":delay});
}
现在您需要调用callWithDelay并传入您的函数和参数，执行程序将通过将参数应用于指定的函数来处理此调用。
function GoExecutor(){
var executeArray = []; // Store go methods that waiting for execute
var isRunning = false; // Handle looper function
// start runner function
var run = function(){
if(isRunning)
return;
isRunning = true;
runner();
}
// looper for executeArray
var runner = function(){
if(executeArray.length == 0){
isRunning = false;
return;
}
// pop the first inserted params
var currentExec = executeArray.shift(0);
// wait delay miliseconds
setTimeout(function(){
// execute the original go function
currentExec.funcNam.apply(currentExec.funcNam, currentExec.arrayParams);
// after finish drawing loop on the next execute method
runner();
}, currentExec.delay);
}
this.push = function(dir, dist){
executeArray.push([dir,dist]);
run();
}
}
// GoExecutor instance
var goExec = new GoExecutor();
var callWithDelay = function (func, arrayParams, delay){
goExec.push({"func": func, "arrayParams":arrayParams, "delay":delay});
}
async/await的环境，你可以编写看似同步的代码，但最终必须是异步的。 - zzzzBov