分別對兩種鉤子做異步討論：
- Action
對于動作而言，它只是在正常工作流中被同步觸發(fā)的行為，并不會對原工作流產(chǎn)生影響。因此異步情況【不考慮】。 - Filter
對于過濾器而言，它需要返回?cái)?shù)據(jù)后正常工作流才能根據(jù)返回的數(shù)據(jù)繼續(xù)工作，如果它出現(xiàn)異步，工作流也需要等待它完成后才能繼續(xù)執(zhí)行。因此它的異步情況【應(yīng)該被考慮】。
普通數(shù)據(jù)過濾
正常運(yùn)行的工作流中執(zhí)行了一個(gè)名為”sample_filter”的過濾器，被過濾的參數(shù)是“filterMe”字符串，以及其他兩個(gè)輔助參數(shù)：
var result = apply_filters("sample_filter","filterMe","otherArg1","otherArg2");
console.log(result);
//...后續(xù)其他操作在未添加”sample_filter”過濾器前，運(yùn)行結(jié)果屏幕顯示字符串：filterMe
現(xiàn)在添加一個(gè)過濾器，目的是將被過濾的字符串和其他兩個(gè)參數(shù)使用~符號串接起來：
//過濾器
function sample_filter_connect_strings( original_string, arg1, arg2 ) {
return original_string+"~"+arg1+"~"+arg2;
}
add_filter("sample_filter", sample_filter_connect_strings);
//正常工作流
var result = apply_filters("sample_filter","filterMe","otherArg1","otherArg2");
console.log(result);
//...后續(xù)其他操作此時(shí)，運(yùn)行結(jié)果屏幕顯示過濾后的字符串：filterMe~otherArg1~otherArg2
異步過濾解決方案
同樣是上面的例子，如果過濾的字符串是來自后端服務(wù)器或需要一定時(shí)間后才能返回，那么怎么辦呢？假設(shè)現(xiàn)在過濾器本身需要延遲1秒后才返回結(jié)果，我們首先會想到的是：
//過濾器
function sample_filter_connect_strings( original_string, arg1, arg2 ) {
setTimeout(function(){
return original_string+"~"+arg1+"~"+arg2;
},1000)
}
add_filter("sample_filter", sample_filter_connect_strings);
//正常工作流
var result = apply_filters("sample_filter","filterMe","otherArg1","otherArg2");
console.log(result);
//...后續(xù)其他操作我們邏輯上認(rèn)為延遲后返回?cái)?shù)據(jù)即可。然而事實(shí)上屏幕卻顯示：undefined
原因是等待時(shí)間造成了異步行為，瀏覽器并不會停在那里不動。也就是說，在1s延時(shí)的時(shí)候，瀏覽器仍然在繼續(xù)執(zhí)行代碼。由于過濾器并沒有return，因此得到的結(jié)果是undefined
這種行為新手很容易犯錯(cuò)：這類似于發(fā)起的Ajax請求，瀏覽器會在某個(gè)時(shí)間后才會得到結(jié)果，然而后面的代碼段并不會暫停等待。通常這種情況我們的處理方式是callback回調(diào)。
提供一個(gè)我個(gè)人提出的解決方案
我們這樣理解：原始的工作流“被過濾的數(shù)據(jù)”是一個(gè)function，這個(gè)function本身接受一個(gè)回調(diào)參數(shù)。在數(shù)據(jù)處理完成后，將數(shù)據(jù)回調(diào)給參數(shù)繼續(xù)后續(xù)處理。因此我們將工作流改造為下面的樣子來進(jìn)行后續(xù)處理：
var tobe_Filtered = function(resolve) {
resolve( "filterMe" );
}
var callback = function(result) {
console.log(result);
//...后續(xù)其他操作
}
var result_function = apply_filters("sample_filter",tobe_Filtered,"otherArg1","otherArg2");
result_function(callback)運(yùn)行上述代碼時(shí)，第8行先嘗試過濾 tobe_Filtered 方法，發(fā)現(xiàn)未添加過濾器，因此得到的結(jié)果仍然是 tobe_Filtered。第9行執(zhí)行了result_function（tobe_Filtered）方法。執(zhí)行時(shí)，調(diào)用了第2行的 resolve，而 resolve 又是在第9行傳入的callback，因此，callback 接收到了第 1行返回的“filterMe”數(shù)據(jù)。
簡化一下會更好看：
apply_filters("sample_filter",function( resolve ){
resolve( "filterMe" );
},"otherArg1","otherArg2")(function( result ){
console.log(result);
//...后續(xù)其他操作
})根據(jù)“過濾后的數(shù)據(jù)和過濾前的數(shù)據(jù)類型原則上相同”這個(gè)條件，因此過濾器也應(yīng)該返回的是function。
由于上一步返回的是方法，要得到數(shù)據(jù)需要等待上一步回調(diào)，因此需要編寫上一步的回調(diào)函數(shù)。
//過濾器
function sample_filter_connect_strings( tobe_Filtered_function, arg1, arg2 ) {
return function( resolve ) {
//從被過濾的方法中回調(diào)數(shù)據(jù)
tobe_Filtered_function(function( data_tobe_filtered ){
//異步回調(diào)數(shù)據(jù)
setTimeout(function(){
resolve( data_tobe_filtered+"~"+arg1+"~"+arg2 );
},1000)
})
}
}
add_filter("sample_filter", sample_filter_connect_strings);
//正常工作流
apply_filters("sample_filter",function( resolve ){
resolve( "filterMe" );
},"otherArg1","otherArg2")(function( result ){
console.log( result );
//...后續(xù)其他操作
})于是，就實(shí)現(xiàn)了異步過濾的效果。
如果只是為了得到新數(shù)據(jù)，而不是從上一步的結(jié)果中過濾，也可以忽略被過濾的方法，直接resolve新數(shù)據(jù)：
//過濾器
function sample_filter_connect_strings( tobe_Filtered_function, arg1, arg2 ) {
return function( resolve ) {
//直接異步resolve新數(shù)據(jù)，而不從上一步的回調(diào)方法中得到數(shù)據(jù)
setTimeout(function(){
resolve( "New Data" );
},1000)
}
}
add_filter("sample_filter", sample_filter_connect_strings);
//正常工作流
apply_filters("sample_filter",function( resolve ){
resolve( "filterMe" );
},"otherArg1","otherArg2")(function( result ){
console.log( result );
//...后續(xù)其他操作
})
總結(jié)
異步過濾解決方案過濾的并不是數(shù)據(jù)，而是方法。該方法接受一個(gè)回調(diào)函數(shù)，將數(shù)據(jù)回調(diào)給函數(shù)后進(jìn)行后續(xù)處理。
由于上一步返回的是方法，要得到數(shù)據(jù)需要等待上一步回調(diào)，因此需要編寫上一步的回調(diào)函數(shù)。
使用Promise也可實(shí)現(xiàn)類似功能
