javascript - 一项事件是否在另一项事件结束后才发生？

Question

我正在尝试创建如下所述的一系列事件:

1) 用户可以点击.post-link，如果页面不存在，它会将页面滚动到顶部。

2) #project-container 将打开，显示 #loading-animation。

3) 该帖子将通过 Ajax 加载。

<小时/>

现在，当我点击 .post-link 时，一切似乎都会立即发生。如何格式化下面的代码以确保一个事件在另一个事件完成后发生？

本质上，this is what I'm trying to recreate 。当您单击帖子时，请注意隐藏的容器如何打开以显示加载动画，然后一旦内容加载，它就会打开以显示内容。

JS

$('.post-link').click(function(e) {

    e.preventDefault();

    $('html, body').animate({
        scrollTop : 0
    },500, function() {
        $('#loading-animation').show();
    });

    var post_id = $(this).attr('rel');
    var ajaxURL = site.ajaxurl;

    $.ajax({
        type: 'POST',
        url: ajaxURL,
        data: {'action': 'load-content', post_id: post_id },
        success: function(response) {
            $('#project-container').html(response);
            $('#loading-animation').hide();
        return false;
        }
    });

});

HTML

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

        <div id="project-container">
            <img id="loading-animation" src="http://i.imgur.com/5RMfW8P.gif" style="display:none">
        </div>

        <!-- Start the loop -->
        <?php $home_query = new WP_Query('post_type=projects');

        while($home_query->have_posts()) : $home_query->the_post(); ?>

            <a class="post-link" href="#" rel="<?php the_ID(); ?>">
                <article id="post-<?php the_ID(); ?>">
                    <div class="post-info">
                        <h1 class="entry-title"><?php the_title(); ?></h1>
                    </div>
                    <?php the_post_thumbnail( "home-thumb", array( 'class' => 'grayscale grayscale-fade') ); ?>
                </article><!-- #post-## -->
            </a>

        <?php endwhile; ?>
        <?php wp_reset_postdata(); // reset the query ?>

    </main><!-- #main -->
</div><!-- #primary -->

PHP

/**
 * Enqueue scripts and styles.
 */
function starter_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, NULL, true );
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-effects-core');

    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
    wp_enqueue_script( 'gray', get_template_directory_uri() . '/js/min/jquery.gray.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', array('jquery'), '', true );
    wp_localize_script( 'includes', 'site', array(
                'theme_path' => get_template_directory_uri(),
                'ajaxurl'    => admin_url('admin-ajax.php')
            )
    );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );

/**
 * Return the post content to the AJAX call
 */
function my_load_ajax_content () {
    $args = array(
        'p' => $_POST['post_id'], 
        'post_type' => 'projects' 
        );
    $post_query = new WP_Query( $args );
    while( $post_query->have_posts() ) : $post_query->the_post(); ?>

    <div class="post-container">

        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

        <?php the_content(); ?>

    </div><!-- #post-## -->

    <?php       
    endwhile;           
    exit;
}
add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' );
add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' );

Answer 1

加载第一篇文章后，您的#loading-animation 将被删除，您无法再与其交互。

尝试将 ajax 内容加载到 #project-container 中的另一个包装元素

HTML

   <div id="project-container">
     <img id="loading-animation" src="http://i.imgur.com/5RMfW8P.gif" style="display:none">
     <div class="ajax-wrapper"></div>
   </div>

JS

      [...]
      success: function(response) {
         $('#project-container .ajax-wrapper').html(response);
         $('#loading-animation').hide();
         return false;
      }
      [...]