功能加载速度不够快

Question

我有一个each函数，用于确定何时在ID中单击链接。点击发生后，它会获取相关属性并将它们与主图像相关联。

此功能还可以包含视频，因此如果html包含名为#video的ID，则会获取视频属性并将其粘贴到预定义的<video>中。

当您第一次加载所有内容并快速点击数字5时，elevateZoom的叠加层会出现在视频之上。甚至认为我有一个判断它的if语句。

当用户非常快速地点击它时，最好的方法是克服这个问题。

在此试用：http://s.codepen.io/jagmitg/debug/jPXzzz？

实际代码：http://codepen.io/jagmitg/pen/jPXzzz

$('#product-gallery-super').children().click(function(e) {
  e.preventDefault();
  var prodImg = $(this).attr('data-image');
  var imgSrc = $(this).children().attr('src')
  var vidCheck = false;
  var mainImg = $('.main-image');

  if (imgSrc != 'http://yi.yoga/images/cs.jpg') {

    $(this).addClass("active-thumbnail").siblings().removeClass("active-thumbnail");

    if ($(this).attr('id') == 'video') {
      $('.main-image').hide();

      if (!$('.product-video').hasClass('product-video')) {

        var videoLink = $(this).attr('href');
        var videoImg = $(this).find('img').attr('src');

        var video = '<div class="video-container"> <video class="flat-video product-video" bgcolor="#FFFFFF" id="mainVideo" poster="' + videoImg + '" autoplay autobuffer width="100px" height="100px"> <source src="' + videoLink + '"> <object type="application/x-shockwave-flash" data="http://vjs.zencdn.net/c/video-js.swf" width="100%" height="auto"> <param name="allowfullscreen" value="false"> <param name="allowscriptaccess" value="always"> <param name="flashvars" value="file=' + videoLink + '"> <!--[if IE]><param name="movie" value="http://vjs.zencdn.net/c/video-js.swf"><![endif]--> <img src="' + videoImg + '" width="100%" height="auto" alt="Video"></object> </video>  <span class="playPause icon-play off"></span> <div class="controls-bar off"> <div class="duration"> <div class="duration-amount"></div> </div> </div> <div class="top-controls-bar off"> <div class="info"> </div> </div> </div>';

        $('.container').prepend(video);

        // START VIDEO FUNCTION videoInitate();

      }

    } else {
      mainDestroy()

      $('.video-container').remove();

      $('.main-image').show();
      $('.main-image').attr('src', prodImg);

      $('.product-zoom').elevateZoom({
        cursor: 'pointer',
        zoomType: "window",
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 750,
        responsive: true,
        borderSize: 1,
        borderColour: '#DDDDDD',
        lensBorder: 1,
        lensSize: 200,
        scrollZoom: false,
        zoomWindowFadeOut: 1,
      });

    }

  }

});

function mainDestroy() {
  $('.zoomContainer').remove();
  $('.product-zoom').removeData('elevateZoom');
  $('.product-zoom').removeData('zoomImage');
}

.active-thumbnail {
  display: inline-block;
  border: 1px solid black;
}
#product-gallery-super img {
  width: 61px;
  height: 79px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="container">
  <img class="main-image image-resize product-zoom" src="http://placehold.it/300x400?text=1" data-zoom-image="http://placehold.it/1000x2000?text=1" onerror="comingSoonMain(this)">

  <div id="product-gallery-super">
    <a href="#" class="product-zoom-gallery active-thumbnail" data-image="http://placehold.it/300x400?text=1">
      <img src="http://placehold.it/61x79?text=1">
    </a>
    <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=2">
      <img src="http://yi.yoga/images/cs.jpg">
    </a>
    <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=3">
      <img src="http://placehold.it/61x79?text=3">
    </a>
    <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=4">
      <img src="http://placehold.it/61x79?text=4">
    </a>
    <a href="http://simplypx.com/images/Prometheus.mp4" id="video" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=VID">
      <img src="http://placehold.it/61x79?text=5">
    </a>
    <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=6">
      <img src="http://placehold.it/61x79?text=6">
    </a>

  </div>

</div>