Question

这是一个场景：我正在构建一个Wordpress插件来管理我参与的一些调查研究。项目管理员可以从WP管理界面上传一个csv文件。在客户端，当文件上传时，它会遍历文件的每一行，提取有关用户的必要信息，然后进行AJAX调用以将参与者添加到项目中。我决定在客户端解析csv文件并逐个提交ajax请求，以便我可以在每次返回时更新进度条。 javascript看起来像这样：

$( '#csv_upload_button' ).click( function() {
    // declare the necessary variables
    var f = $( '#csv_file_input' )[0].files[0],
        fr = new FileReader,
        rows, headers, dialog, count, remaining;
    // when the file loads
    fr.onload = function() {
        // get the rows, the count, number remaining to process, and headers
        rows = fr.result.split( "\n" );
        remaining = count = rows.length - 1; // -1 to account for header row
        headers = $.trim( rows[0] ).split( ',' );
        // create the dialog box to show the progress bar
        dialog = $( '<div></div>' )
                    .html( 
                        '<p>Loading...</p>' +
                        '<p><progress id="csv_upload_progress" max="' + count + 
                        '" min="0" value="0"></p>' )
                    .dialog( { modal: true; } );
        // then for each row in the file
        $( rows ).each( function( i, r ) {
            // create an object to hold the data
            var data = {}, row = $.trim( r ).split( ',' ), j;
            if ( i > 0 ) { // data starts on the second row
                // map the data into our object
                for ( j = 0; j < headers.length; j++ ) {
                    data[ headers[ j ] ] = row[ j ];
                }
                // send it to the server
                $.post(
                    ajaxurl, 
                    { 
                        action: 'import_panel_member', 
                        data: data, 
                        postid: $( '#post_ID' ).val() 
                    }, 
                    function( result ) {
                        var prog = $( '#csv_upload_progress' );
                        prog.attr( 'value', prog.attr( 'value' ) + 1 );
                        if ( 0 == --remaining ) {
                            // stuff to do when everything has been loaded
                        }
                    }
                );
            }
        });
    };
    // read the csv file
    fr.readAsText( f );
});

PHP看起来像这样：

function import_panel_member() {
    header( 'content-type: application/json' );
    // get the variables sent from the client
    $postid = $_POST[ 'postid' ];
    $data   = $_POST[ 'data'   ];
    /*
     * ...do other things involving talking to a 3rd party server...
     */
    // get the WP meta data variable to be updated
    $participants = get_post_meta( $postid, '_project_participants', true );
    // modify it
    $participants[] = $data;
    // update the database
    update_post_meta( $postid, '_project_participants', $participants );
    // return a message to the client
    echo json_encode( (object) array( 'success' => 1, 'message' => 'added' ) );
    exit;
}

问题在于，由于这些请求是异步发生的，因此_project_participants元数据字段似乎仅由要处理的最后一条记录更新。换句话说，只有列表中的最后一个人出现在参与者列表中。以下是我尝试过的一些事情：

将$.post()更改为$.ajax()并设置async: false
这可以工作，但速度要慢得多（由于同步调用），并且出于某种原因，它会阻止我的对话框出现，直到所有的ajax调用完成后。
将整个csv文件上传到服务器并在那里处理
而不是在客户端解析csv。这也有效，但我不认为我可以从服务器获得中间反馈，我可以使用它来更新进度条。此请求可能需要一段时间，我不希望用户在请求完成之前“放弃”该请求。当这样做时，有时服务器永远不会响应ajax调用。

所以也许我很贪婪，只想要我的蛋糕，也吃它。我如何利用异步请求的速度，这使我有机会通过进度条向用户提供反馈，但不会让自己陷入服务器上的并发问题？

Answer 1

我明白了。答案是两种方法的混合。我可以使用一系列$.post()调用来执行在异步模式下工作得更好的内容，然后上传整个csv以执行在同步模式下工作得更好的内容。如果不在SO中输入整个解释，就不会想到这一点！

通过ajax更新Wordpress元数据时的并发问题

1 个答案: