停止函数在 mouseleave 上运行

Question

我创建了一个函数，它遍历一组 div 并提取 data-hover 属性。然后我将这些值存储在一个数组中并循环遍历它们，生成一个图像，然后将它们附加到另一个 div。我添加了一个 setTimeOut 函数来延迟这些图像的加载，并且我正在使用 css 动画来创建它们正在加载的效果。

这个函数只运行一次，并且在我将鼠标悬停在父 div 'thumbnail-wrapper' 上时发生。一旦它们被加载到 DOM 中，我创建了另一个函数，该函数在 mouseleave 上触发并将隐藏的类添加到翻转图像中。

然后我有另一个在鼠标悬停时触发的函数，它的工作原理与第一个相同，但这次只是添加了类“fadeIn”并动态添加了一个z-index 值，因此它们似乎加载在每个函数的顶部其他。

如果用户将鼠标悬停在“thumbnail-wrapper”上，这一切都有效，因为所有 img 都有时间加载。但是，如果您在计数完成之前离开 div，它会将“隐藏”类添加到父 div，但取决于光标离开的时间，它不会删除类“FadeIn”或重置z-index因为计数仍在发生。

如果用户移开光标，有什么方法可以阻止“on.mouseover”函数完成计数？

function rolloverImages() {

  $('.thumbnail-wrapper').one('mouseover', function() {

        var rollovers = $(this).find('.rolloverimages div');
        var time = 0;

        rollovers.each(function() {
           setTimeout(function() {
              var datasrc = $(this).data('hover');
              var img = $('<img class="fadeIn" id="dynamic">');
              var imgsrc = img.attr('src', datasrc);
              var parent = $(this).parent('.rolloverimages').parent('.thumbnail-wrapper').find('.rolloverloaded');
              imgsrc.appendTo(parent);
            }.bind(this), time);
            time += 200;
        });

        console.log("images loaded to DOM");
    });

    $('.thumbnail-wrapper').on('mouseleave', function() {
        $(this).find('.rolloverloaded').addClass('hidden');
        $(this).find('.rolloverloaded img').removeClass('fadeIn').css({'z-index':'0'});;
    });

    $('.thumbnail-wrapper').on('mouseover', function() {

      var time = 0;

        if($(this).find('.rolloverloaded').hasClass('hidden')) {

          $(this).find('.rolloverloaded').removeClass('hidden');
          $(this).find('.rolloverloaded img').removeClass('fadeIn');

        var count = 1;

        $(this).find('img').each(function() {
           setTimeout(function() {
            count++;
            $(this).addClass('fadeIn').css('z-index', count);
            }.bind(this), time);
            time += 200;
        });

      }
    });

如果鼠标在计数完成之前离开，这就是最终发生的情况

    <div class="rolloverloaded hidden”>
    <img class="" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-4-360x259.jpg" style="z-index: 0;">
<img class="" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-2-360x259.jpg" style="z-index: 0;">
<img class="" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-1-360x259.jpg" style="z-index: 0;">
<img class="" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-6-360x259.jpg" style="z-index: 0;">
<img class="fadeIn" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-7-360x259.jpg" style="z-index: 7;">
<img class="fadeIn" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-3-360x259.jpg" style="z-index: 8;">
<img class="fadeIn" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-8-360x259.jpg" style="z-index: 9;">
<img class="fadeIn" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-10-360x259.gif" style="z-index: 10;">
</div>

Answer 1

试试这个...

function rolloverImages() {

  $('.thumbnail-wrapper').one('mouseover', function() {

        var rollovers = $(this).find('.rolloverimages div');
        var time = 0;
        var $e = $(this);
        $e.attr("data-persist",true);

        rollovers.each(function() {
           setTimeout(function() {
              if ($e.attr("data-persist")) {
                  var datasrc = $(this).data('hover');
                  var img = $('<img class="fadeIn" id="dynamic">');
                  var imgsrc = img.attr('src', datasrc);
                  var parent = $(this).parent('.rolloverimages').parent('.thumbnail-wrapper').find('.rolloverloaded');
                  imgsrc.appendTo(parent);
              }
            }.bind(this), time);
            time += 200;
        });

        console.log("images loaded to DOM");
    });

    $('.thumbnail-wrapper').on('mouseleave', function() {
        $(this).attr("data-persist",false);
        $(this).find('.rolloverloaded').addClass('hidden');
        $(this).find('.rolloverloaded img').removeClass('fadeIn').css({'z-index':'0'});;
    });

    $('.thumbnail-wrapper').on('mouseover', function() {

      var time = 0;

            if($(this).find('.rolloverloaded').hasClass('hidden')) {

              $(this).find('.rolloverloaded').removeClass('hidden');
              $(this).find('.rolloverloaded img').removeClass('fadeIn');

             var count = 1;

        $(this).find('img').each(function() {
           setTimeout(function() {
            if ($(this).attr("data-persist")) {
                count++;
                $(this).addClass('fadeIn').css('z-index', count);
            }
            }.bind(this), time);
            time += 200;
        });

      }
    });