我遇到了在WordPress插件中调用的异步ajax请求的问题。
这是我想要使用的代码(从底部读取):
var $ = jQuery.noConflict();
/*
* jQuery.ajaxQueue - A queue for ajax requests
*
* (c) 2011 Corey Frang
* Dual licensed under the MIT and GPL licenses.
*
* Requires jQuery 1.5+
*/
(function($) {
// jQuery on an empty object, we are going to use this as our Queue
var ajaxQueue = $({});
$.ajaxQueue = function( ajaxOpts ) {
var jqXHR,
dfd = $.Deferred(),
promise = dfd.promise();
// queue our ajax request
ajaxQueue.queue( doRequest );
// add the abort method
promise.abort = function( statusText ) {
// proxy abort to the jqXHR if it is active
if ( jqXHR ) {
return jqXHR.abort( statusText );
}
// if there wasn't already a jqXHR we need to remove from queue
var queue = ajaxQueue.queue(),
index = $.inArray( doRequest, queue );
if ( index > -1 ) {
queue.splice( index, 1 );
}
// and then reject the deferred
dfd.rejectWith( ajaxOpts.context || ajaxOpts,
[ promise, statusText, "" ] );
return promise;
};
// run the actual query
function doRequest( next ) {
jqXHR = $.ajax( ajaxOpts )
.done( dfd.resolve )
.fail( dfd.reject )
.then( next, next );
}
return promise;
};
})(jQuery);
function add_log( log ) {
var $textarea = $('#log');
var content = $textarea.val();
$textarea.val( content + log + "\n" );
$textarea.scrollTop( $textarea[0].scrollHeight );
}
function process_post(post_id, post_title) {
return $.ajaxQueue({
type: 'POST',
async: true,
url: ajaxurl,
data: {
'action': 'process_post',
'nonce': $('input#steps').val(),
'post': post_id
},
success: function(response) {
if ( response.success == false ) {
add_log('Processing post: ' + post_title + ' failed. Please restore the database backup.' );
throw new Error();
}
add_log('Post: ' + post_title + ' processed successfully' );
}
}); // ajax post
}
function process_posts(post_type) {
// processing posts each
return $.ajaxQueue({
type: 'POST',
async: true,
url: ajaxurl,
data: {
'action': 'get_posts',
'nonce': $('input#steps').val(),
'post_type': post_type
},
success: function(response) {
if ( response.success == false ) {
return false;
}
var $posts = response.data;
add_log("\n" + '# Posts loaded and ready to convert');
$.each($posts, function( post_id, post_title ) {
process_post(post_id, post_title);
}); // each post
}
}); // ajax posts
}
function process_term( term_id, term_title ) {
$.ajaxQueue({
type: 'POST',
async: true,
url: ajaxurl,
data: {
'action': 'process_term',
'nonce': $('input#steps').val(),
'term': term_id
},
success: function(response) {
if ( response.success == false ) {
add_log('Processing term: ' + term_title + ' failed. Please restore the database backup.' );
throw new Error();
}
add_log('Term: ' + term_title + ' processed successfully' );
}
});
}
function get_terms( taxonomy ) {
$.ajaxQueue({
type: 'POST',
async: true,
url: ajaxurl,
data: {
'action': 'get_terms',
'nonce': $('input#steps').val(),
'taxonomy': taxonomy
},
success: function(response) {
if ( response.success == false ) {
throw new Error();
}
var $terms = response.data;
if ( $.isEmptyObject($terms) ) {
add_log('# Taxonomy: ' + taxonomy + ' has no terms - skipping' );
} else {
add_log('# Terms loaded and ready to convert');
$.each($terms, function( term_id, term_title ) {
process_term( term_id, term_title );
}); // each terms
} // endif
}
});
}
function process_taxonomies( taxonomies ) {
// processing taxonomies
$.each(taxonomies, function( taxonomy ) {
add_log("\n" + '## Processing taxonomy: ' + taxonomy);
get_terms( taxonomy );
}); // each taxonomy
}
function process( $data ) {
// processing each post type
$.each($data, function( post_type, taxonomies ) {
add_log( "\n" + '## Processing post type: ' + post_type);
process_taxonomies( taxonomies );
process_posts( post_type );
}); // each post type
}
它应该做什么 - 它应该异步处理wp分类和帖子。步骤进行:
任何步骤都应该在textarea中保存一个日志。
而不是漂亮的同步日志我得到了所有混合(因为异步ajax)。将ajax async更改为false会导致空白文本区域,并且在该过程结束时,它会立即添加所有日志消息,这不是我正在寻找的。 p>
正如您所看到的,我已经在使用ajaxQueue,但它没有帮助。同时玩Deffered和when()不能完成这项工作。
以下是示例日志:
## Processing post type: post
## Processing taxonomy: category
# Terms loaded and ready to convert
## Processing taxonomy: post_tag
## Processing post type: testomonial
Term: Uncategorized processed successfully
Term: Category processed successfully
# Terms loaded and ready to convert
# Posts loaded and ready to convert
# Posts loaded and ready to convert
Term: Tag processed successfully
Term: Tagen processed successfully
Post: Hello processed successfully
Post: German only title processed successfully
Post: English only title processed successfully
Post: Mixed title EN processed successfully
Post: Gutentag processed successfully
Post: Testimonial 1 processed successfully
Post: Testimonial 2 processed successfully
Post: Testimonial 3 processed successfully
我会非常感谢任何建议。