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

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

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

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

提前感谢您的帮助

编辑： 感谢您的回答。是的，顺序很重要，但是这个列表一直在改变（添加了更多的东西）并且事先不知道。如果有一种方法可以让调度程序对象以特定顺序异步添加要完成的任务，但它将以该顺序同步调用它们，那就太好了。我相应地改变了我的问题，因为大多数人都很困惑。

EDIT2： 试图改变我的代码： 调度程序如下所示。每次调用的磁贴和样本可能不同，但对于某些调用可能相同。将应用除 addSample 之外的其他操作。如果使用相同的磁贴，则调用更改应按该顺序累积在磁贴中。最重要的是，调度程序应该能够异步执行更多操作。

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(){
           //...
        });
    });
});

现在可以保证代码以正确的顺序运行。 “末日金字塔”模式有点难看，所以你可能想找到一种解决方法，要么使用命名函数而不是匿名函数进行回调，要么使用“序列器”库函数：

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

Answer 2

问题是在每次操作发生之前，所有对convertTileToRGB 的调用都开始作用于对磁贴的引用。

如果您希望操作具有附加性，则必须使每个操作都对前一个操作的结果起作用，但要做到这一点，您必须等待前一个操作结束。

我不知道您实际执行的是哪些操作，但也可以以“增量”非破坏方式执行这些操作。

如果这不是一个选项，为了控制一系列保持代码可读的回调，我建议使用一些流控制库，如async.js

Answer 3

如果您在异步执行方面遇到问题，请尝试使用信号量进行同步。 http://en.wikipedia.org/wiki/Asynchronous_semaphore

交替阻塞调用，直到非线程安全操作完成。此外，如果方法似乎没有累积，请确保前一个方法的结果是您在下一个方法中用于操作图像的任何逻辑的参数，而不是原始图像作为参数。

这个问题很模糊，所以我希望这会有所帮助。

Answer 4

您可以做的是采取一系列步骤并将其组织为一个列表：

var thingsToDo = [
  { params: p1, process: function(pixels, params) {
    // ... first function ...
  }},
  { params: p2, process: function(pixels, params) {
    // ... second function ...
  }},
  { params: p3, process: function(pixels, params) {
    // ... third function ...
  }}
];

现在您可以创建一个函数来执行一系列转换：

function sequence( tile, thingsToDo ) {
  function doOneThing( ) {
    var thing = thingsToDo[thingCount];

    convertToRgb(tile, function(pixels) {
      thing.process(pixels, thing.params);
      thingCount ++;
      if (thingCount < thingsToDo.length)
         doOneThing();
    });
  }

  var thingCount = 0;
  doOneThing();
}

当您调用它时，它会遍历您的“事物”，一次只做一个。我在你的回调中添加了一个“params”参数；目前尚不清楚这些参数对象是如何影响代码中的情况的。因此，每个“事物”都是一个参数块和一个回调函数。

所以“序列”函数会这样调用：

sequence(tile, thingsToDo);

Answer 5

您可以查看JavaScript Promises。也许他们提供了一些有用的方法来解决您的问题。

Answer 6

好的，所以我创建了一个调度程序，您可以异步添加更多要使用不同签名调用的待办事项方法，并且有一个 setInterval 会实际调用它们。感谢https://stackoverflow.com/users/90511/missingno 和https://stackoverflow.com/users/182668/pointy，我得到了可以调用一系列方法的想法。问题是我必须更改我所有的函数以具有相同的签名并有一个 cronjob 来检查调度程序是否有更多的调用（Pointy 有，但乍一看并不清楚）。如果他们没有相同的签名，你就不能真正从另一个开始（我认为）。这就是为什么我没有选择missingno的答案。我必须自己实现调度程序，这就是我不接受其他部分答案的原因。这是我为我所做的转换示例。是这样的：

addSample = function(tile,sample,num_samples,which_sample){}
render = function(tile){}
...

变成了：

addSample = function(config,dispatcher){
     var tile = config["tile"];
     var sample = config["sample"];
     var num_samples = config["num_samples"];
     var which_sample = config["which_sample"];

     something.call(function(){
        //async part of code
        dispatcher.check(); // important! 
     });
}
render = function(config,dispatcher){
     var tile = config["tile"];
     something.call(function(){
        //async part of code
        dispatcher.check(); // important! 
     });
}
...

如果您没有在最后一行调用 dispatcher.check()，那么对于每个间隔（见下文），您将只有一次 TODO 调用。但我们需要所有剩下的人。然后我有一个调度员：

var dispatcher = { };
dispatcher.current = 0;
dispatcher.total = 0 ;
dispatcher.next = function(){
    this.current++;
}
dispatcher.hasMore = function(){
    return dispatcher.current<dispatcher.total;
}
dispatcher.addNew = function(todo){
    this.total++;
    this[this.total] = todo;
    return this;
}
dispatcher.exec = function(){
    this[this.current].func(this[this.current].config,this);    
    delete this[this.current]; //deletes the TODO just invoked
}

dispatcher.check = function(){
    if (this.hasMore()){
        dispatcher.next();
        dispatcher.exec();
    }
}

然后我在调度程序中添加更多 TODO 作业，每个作业都有 func: funcName 和 config 以及异步函数曾经拥有的所有输入。

dispatcher.addNew({func: addSample, config: {tile: tile,sample: sample, num_samples: 6, which_sample: 1}});
dispatcher.addNew({func: render,config: {tile: tile}});
dispatcher.addNew({func: addSample, config: {tile: tile,sample: sample2, num_samples: 6, which_sample: 2}});
dispatcher.addNew({func: render,config: {tile: tile}});
dispatcher.addNew({func: addSample, config: {tile: tile,sample: sample3, num_samples: 6, which_sample: 3}});
dispatcher.addNew({func: render,config: {tile: tile}});
dispatcher.addNew({func: addSample, config: {tile: tile,sample: sample4, num_samples: 6, which_sample: 4}});
dispatcher.addNew({func: render,config: {tile: tile}});
dispatcher.addNew({func: addSample, config: {tile: tile,sample: sample5, num_samples: 6, which_sample: 5}});

interval 检查然后一个接一个地调用所有的 TODO

setInterval(function(){dispatcher.check();},1000);

感谢大家的宝贵时间！我希望有人会像我一样发现它很有用。