D3.queue - 理解程序流程

我在尝试真正理解d3.queue的程序流程。D3.queue - 理解程序流程

我制作了下面的例子。

也许这个例子和答案可能会帮助他人理解这种棘手的模式。

目前，我有以下几点：

var finished = function(error, results) { 
console.log(results); 
}; 

var fn_1 = function(i, callback) { 
console.log("fn_ 1 called with this argument " +i); 
callback(null, "from function 1"); 
}; 


d3.queue(1) 
    .defer(function(url, callback) { 
    d3.csv(url, function(data) { 
    test_data = data.map(function(d) { return fn_parse_m_tot(d);}); 
    callback(null, "hi there in first function"); 
    }); 

}, url) 

.defer(fn_1, "arg1") 
.await(finished);

我期待下面的结果当函数结束（）执行：

“嗨有在第一功能”

“ from function 1“

但我只得到以下内容：

“hi there in first function”

嵌入在fn_1（）中的回调似乎并未执行...？

来源

2016-10-27 markthekoala

对不起，我应该修改上面的问题。预计： – markthekoala

.defer中的第一个参数是一个异步任务（即函数）。所有后续参数都是该任务的（可选）参数。你的第一个任务需要一个URL和一个回调，所以你必须提供它们，否则它们将在你的任务的主体中未定义。

你可以宣布你的任务fn_0第一：

var fn_0 = function(url, callback) { 
    console.log('fn_0 (url: ' + url + '; callback: ' + callback + ')'); 
    d3.csv(url, function(error, data) { 
    if (error) { 
     console.log('d3.csv was called but there was an error downloading the data'); 
     throw error; 
    }; 
    test_data = data.map(function(d) { return fn_parse_m_tot(d); }); 
    callback(null, "from fn_0"); 
    }); 
};

fn_1是您的队列中的另一任务。你不需要在这里改变任何东西。

fn_2是你的回调：

var fn_2 = function(a, b) { 
    console.log('fn_2 (a: ' + a + '; b: ' + b + ')'); 
};

现在队列中的代码更可读：

d3.queue() 
    .defer(fn_0, 'url-to-your-csv-file', fn_2) 
    .defer(fn_1, 'arg1', fn_2) 
    .await(finished);

这里是一个JSFiddle。

请注意，如果您编写d3.queue(1)，您的所有任务将按顺序运行，因此任务只有在所有先前任务成功完成时才会运行。

查看d3-queue API documentation。

来源

2017-06-15 20:44:14 jackdbd

D3.queue - 理解程序流程

回答

相关问题