我开发了一个模板页面，其中显示了一个“员工”网格（自定义帖子类型）。这部分工作正常，但我还需要设置一个灯箱，以便在单击时显示其他详细信息。为了避免同时加载所有内容，我设置了一个ajax脚本。此脚本使用wp load。php根据帖子的ID获取帖子数据。

模板如下所示：

<!-- Hide the lightbox by default -->
<style>
    .lightbox {display:none;}
    .noscroll {overflow:hidden;}
</style>

<!-- This script triggers the lightbox and ajax event -->
<script>
    $(window).bind("load resize scroll", function() {
        $(\'.employees\').each(function(){
            $(this).stop().click(function() {
                var eid = "";
                var eid = $(this).data(\'id\');
                $(\'body\').stop().addClass(\'noscroll\');
                $(\'.lightbox\').stop().fadeIn(250);
                console.log(\'eid\');
                $.ajax({
                    url: \'/wp-content/themes/dev/load-employee.php?id=\'+eid,
                    type:\'POST\',
                    dataType: \'html\',
                    success: function(data){
                        $(\'.lightbox .html(data).promise().done(function(){
                            $(\'.lightbox\').fadeIn(250);
                        });
                    }
                })
                $(\'.lightbox\').click(function(){
                    $(\'body\').stop().removeClass(\'noscroll\');
                    $(\'.lightbox .card\').stop().fadeOut(250);
                    $(this).stop().fadeOut(250).scrollTop(0);
                });
            });
        });
    });
</script>

<div class="lightbox">
    <!-- Use javascript to append load-employee.php data here -->
</div>

<? $employees = new WP_Query( array( \'post_type\' => \'employees\', \'posts_per_page\' => -1, \'order\' => \'ASC\' ) );
while ( $employees->have_posts() ) : $employees->the_post();?>
<a class="employee" data-id="<?echo get_the_ID();?>">
    <!-- Echo employee information -->
</a>
<? endwhile; wp_reset_postdata(); ?>

这是最重要的部分：

url: \'/wp-content/themes/dev/load-employee.php?id=\'+eid,

当美元。ajax脚本被触发，它通过url将“数据id”推送到该文档。（如果有更好的方法，请告诉我）

加载员工。php如下所示：

<?
// Need this file to make it work
include_once(\'../../../wp-load.php\');

// Get post ID from url
if (isset($_GET[\'id\'])) {
    $id = $_GET["id"];
}else{
    exit;
}

//Use ID to generate single post to echo back to template page.
$args = array(\'posts_per_page\' => 1, \'p\' => $id, \'post_type\' => \'employees\');

$employeepost = get_posts( $args );
foreach ( $employeepost as $post ) : setup_postdata( $post );
?>

<!-- Single post that matches $id is dumped here -->

<? endforeach; ?>

这也行得通，尽管速度很慢。生成单个post后，数据将被推送到lightbox div中。

success: function(data){
    $(\'.lightbox .html(data).promise().done(function(){
        $(\'.lightbox\').fadeIn(250);
    });
}

所以我遇到的问题是整个过程都很慢。速度足够慢，快速点击会破坏东西。最常见的问题是，同一帖子会连续多次加载到灯箱中。我猜这是由于员工加载器。当ajax脚本调用php文件时，它会花费太多时间来处理新请求。

有没有更好的方法？可能是不需要wp加载的东西。php？

如果没有，有人知道我如何优化我现在拥有的吗？

谢谢

var isLoading = false;

-- Your click event is here --

// Only let things to happen if there\'s no ajax in the middle of process
if( isLoading == false ) {

    // Set it to true - now nothing happens if you click it again
    isLoading = true;

    -- All your ajax logic here --

    // Complete triggers in both cases: "success" or "error"
    complete: function() {

        // Ajax is now done, let\'s let user to trigger another one if he/she wants
        isLoading = false;
    }
}