Question

我正在构建一个显示产品的网页。将鼠标悬停在产品图像上时，应启动类似幻灯片的事件。您将在几个州看到该产品的照片。我用jQuery对此进行了编码，我面临着一个有点烦人的错误。

当您快速将鼠标悬停在多个产品上然后将鼠标放在一个产品上时，它会非常快速地滑过图像。

HTML结构如下所示：

<div class="products">
  <div class="productContainer" data-product-id="1">
    <img src="http://detestdivisie.nl/upload/images/hover-tests/inside/bmw-inside.jpg" class="mainProductImage" />
    <div class="hoverImages">
      <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/inside/bmw-inside-1.jpg" />
      <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/inside/bmw-inside-2.jpg" />
      <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/inside/bmw-inside-3.jpg" />
      <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/inside/bmw-inside-4.jpg" />
      <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/inside/bmw-inside-5.jpg" />
    </div>
  </div>
  <div class="productContainer" data-product-id="1">
    <img src="http://detestdivisie.nl/upload/images/hover-tests/outside/bmw-outside.jpg" class="mainProductImage" />
    <div class="hoverImages">
      <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/outside/bmw-outside-1.jpg" />
      <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/outside/bmw-outside-2.jpg" />
      <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/outside/bmw-outside-3.jpg" />
      <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/outside/bmw-outside-4.jpg" />
      <img src="" data-lazy-src="http://detestdivisie.nl/upload/images/hover-tests/outside/bmw-outside-5.jpg" />
    </div>
</div>
</div>

负责处理事件的Javscript类如下所示：

CategoryProductImages = function () {
  this.className = 'CategoryProductImages';
  this.version   = '0.1.0';

  this.mouseOver         = false;
  this.currentElement    = null;
  this.currentCategoryId = 0;
  this.currentImageList  = [];        
  this.currentImageKey   = 0;

  /**
   * CategoryProductImages.init()
   *
   * Initializes the class that is reponsible for handling the
   * mouse over and outs for the products.
   *
   * This method will call the createObserver method.
   */
  this.init = function () {
    console.log('Called ' + this.className + '.init()');

    this.createObservers();
  };

  /**
   * CategoryProductImages.createObservers()
   *
   * Will handle the mouse over and out events.
   */         
  this.createObservers = function () {
    console.log('Called ' + this.className + '.createObservers()');

    var thisObj = this;

    jQuery('.productContainer').hover(
      /** Called when mouse of the user moves over the element. **/
      function () {
        console.log('Mouse over .productContainer');

        thisObj.mouseOver         = true;                    
        thisObj.currentElement    = jQuery(this);   
        thisObj.currentCategoryId = thisObj.currentElement.data('category-id');                 

        console.log('Lets\'s work for category id ' + thisObj.currentCategoryId);

        thisObj.currentElement.find('.hoverImages img').each(function() {
          thisObj.currentImageList.push(jQuery(this).data('lazy-src'));
        });

        thisObj.iterate();          
      },
      /** Called immediatly after the mouse of the user leaves the element **/
      function () {
        console.log('Mouse out .productContainer');

        thisObj.currentElement   = null;
        thisObj.mouseOver        = false;                    
        thisObj.currentImageList = new Array();
        thisObj.currentImageKey  = 0
      }
    );
  };

  this.iterate = function () {
    console.log('Called ' + this.className + '.iterate()');

    if (this.mouseOver && this.currentImageList.length > 0) {
      console.log('Will now start the iteration process');

      this.currentElement.find('img.mainProductImage').prop('src', this.currentImageList[0]);

      thisObj = this;
      setTimeout(function () {
        console.log('First image shown, will now show next image.');

        thisObj.nextImage(thisObj.currentCategoryId);
      }, 3000)
    } else {
      console.log('Won\'t iterate, because the mouse of the user has left the element, of there are no images to show.');
    }    
  };

  this.nextImage = function (currentCategoryId) {
    console.log('Called ' + this.className + '.nextImage()');

    if (this.mouseOver && this.currentImageList.length > 0 && currentCategoryId == this.currentCategoryId) {
      console.log('MouseOver still active, and images are found, show next image.');

      this.currentImageKey += 1;

      if (typeof this.currentImageList[this.currentImageKey] == 'undefined') {
        console.log('OH NO! We\'ve reached the end of the list. Letst start all over again.');

        this.currentImageKey = 0;
      }

      this.currentElement.find('img.mainProductImage').prop('src', this.currentImageList[this.currentImageKey]);

      thisObj = this;
      setTimeout(function () {
        console.log('Okay, we\'ve waited for three seconds, NEXT! :)');

        thisObj.nextImage(currentCategoryId)
      }, 3000);
    } else {
      console.log('Iteration for ' + currentCategoryId + ' stopped');
      console.log('Mouse over: ');
      console.log(this.mouseOver);
      console.log('Image list length: ');
      console.log(this.currentImageList.length);
      console.log('nextImage category id: ');
      console.log(currentCategoryId);
      console.log('Current category id:');
      console.log(this.currentCategoryId);
      console.log('#########################');
    }
  }
};

var categoryProductImagesObject = new CategoryProductImages();
categoryProductImagesObject.init();

让我更清楚我已经创建了一个CodePen示例。请非常快速地将鼠标悬停在产品1和产品2上，然后将鼠标放在产品1上。您将看到它将以产品图像的方式循环播放。

http://codepen.io/wdivo/pen/lamsq

之前需要的时间和图像被另一个替换是3秒。我忽略了一些东西，因为显然有几个setTimeout在彼此附近工作，而应该只有1个有效的setTimeout。

我应该怎么做以确保只有1＆＃34;活跃＆＃34; setTimeout正在运行？

简单地说，如果新的setTimeouts被激活，我想要停止所有以前的setTimeouts。

我现在正在研究clearInterval，但无法想出实现它的方法......

jQuery悬停图像轮播超时重叠

0 个答案: