javascript - 我们可以有一个调度程序，您可以异步添加要执行的操作，但将按该顺序同步执行吗？

Question

作为我的其他问题的“分支”问题(参见编辑 4)How to convert a png base64 string to pixel array without using canvas getImageData?

我想知道当你有一组这样的函数时会发生什么:

function convertTileToRGB(tile,whatToDoNext){
    tile.img.onload = function() {
        //async code returns pixels
        whatToDoNext(pixels);
    }

}

function doSomethingWithTile(tile,params){
    convertTileToRGB(tile,function(pixels){
        //manipulate pixels in tile
    });
}

function doSomethingWithTile2(tile,params){
    convertTileToRGB(tile,function(pixels){
        //manipulate pixels in a different way
    });
}

有没有办法像这样任意调用序列，

var tile = initialize_tile();

doSomethingWithTile(tile,params1)
doSomethingWithTile2(tile,params2)
doSomethingWithTile(tile,params3)  
...

那是动态的，事先不知道，换句话说，在程序运行时异步添加到调度程序，然后调度程序同步调用它们，以某种方式解决？

如果我们没有调度程序而使用回调，我们可以看到这些方法分别作用于已初始化的图 block ，但它们的操作不会累积到图 block 中。在该示例中，订单被保留，但基本上前一个异步方法的结果不会在下一个中使用。

在此先感谢您的帮助

编辑:感谢您的回答。是的，顺序很重要，但是这个 list 一直在变化(添加了更多的东西)并且事先不知道。如果有一种方法可以让调度程序对象异步添加按特定顺序执行的操作，但它会按该顺序同步调用它们，那就太好了。我相应地更改了我的问题，因为大多数人都很困惑。

编辑 2:试图改变我的代码:调度员如下所示。每次调用的磁贴和示例可能不同，但某些调用可能相同。将应用除 addSample 之外的其他操作。如果使用相同的图 block ，则调用更改应按该顺序在图 block 中累积。最重要的是，调度程序应该能够获得更多异步操作。

var sample = [[0x7f,0x7f,0x7f],[0x7f,0x7f,0x7f],[0x7f,0x7f,0x7f],[0x7f,0x7f,0x7f],[0x7f,0x7f,0x7f],[0x7f,0x7f,0x7f],[0x7f,0x7f,0x7f],[0x7f,0x7f,0x7f],[0x7f,0x7f,0x7f],[0x7f,0x7f,0x7f],[0x7f,0x7f,0x7f],[0x7f,0x7f,0x7f],[0x7f,0x7f,0x7f]]
var tile = initialize_tile({width: 7,height: 7,defaultColor: [0x00,0xAA,0x00], x: 1, y: 2, zoomLevel: 1});
var dispatcher = { 
    0:{
        func: addSample, 
        tile: tile,
        sample: sample, 
        num_samples: 6, 
        which_sample: 1
    },
    1:{
        func: addSample, 
        tile: tile,
        sample: sample, 
        num_samples: 6, 
        which_sample: 2
    },
       2:{
               func: render,
               tile: tile,
         }
};
var disp = dispatcher[0];
disp.func(disp.tile,disp.sample,disp.num_samples,disp.which_sample);    
disp = dispatcher[1];
disp.func(disp.tile,disp.sample,disp.num_samples,disp.which_sample);

使用该代码不会保留顺序，并且不会为下一次调用保留磁贴发生的情况。

Answer 1

如果您希望能够以定义的顺序链接 doSomething 调用，唯一的方法是允许 doSomething 在完成时发出信号，类似于 convertTileToRGB 的做法:

function doSomethingWithTile(tile,params, onDone){
    convertTileToRGB(tile,function(pixels){
        //manipulate pixels in tile
        onDone();
    });
}

最后你的代码看起来像

doSomethingWithTile(tile,params1, function(){
    doSomethingWithTile2(tile,params2, function(){
        doSomethingWithTile(tile,params3, function(){
           //...
        });
    });
});

现在代码可以保证以正确的顺序运行。 “厄运金字塔”模式虽然有点难看，但您可能想找到一种解决方法，通过使用命名函数而不是匿名函数进行回调，或者通过使用“sequencer”库函数:

 //There are lots of async control flow libraries available for Javascript.
 // All of them should allow you to write code sort of like this one:
sequencer([
    function(onDone){ doSomethingWithTile(tile,params1, onDone) },
    function(onDone){ doSomethingWithTile(tile,params2, onDone) },
    function(onDone){ doSomethingWithTile(tile,params3, onDone) }
], function(){
    //...
});

您还可以更动态地做事:

function render_stuff(argss, onDone){

    var i = 0;
    function loop(){
        if(i < argss.length){
            var args = argss[i];
            addSample(args.tile, args.sample, args.num_samples, args.which_sample, function(){
               i = i + 1;
               loop();
            });
        }else{
            render(tile, onDone);
        }
    }

    loop();
}

render_stuff([
   {tile:tile, sample:sample, num_samples:6, which_sample:1},
   {tile:tile, sample:sample, num_samples:6, which_sample:2}
], function(){
    console.log("done rendering");
 });

如果这些函数不是异步的，这将等同于一些代码

function render_stuff(argss){
    i = 0;
    while(i < argss.length){
      var args = argss[i];
      addSample(/**/);
      i = i + 1;
    }
    render(tile);
}

render_stuff([
    {/*...*/}, 
    {/*...*/}
])
console.log("done rendering");