Остановить функцию от запуска при отпускании мыши - PullRequest
Новая
       38

Остановить функцию от запуска при отпускании мыши

0 голосов
/ 05 июля 2018

Я создал функцию, которая перебирает набор элементов div и извлекает атрибут data-hover. Затем я сохраняю эти значения в массиве и перебираю их, генерирую изображение и затем добавляю их в другой div. Я добавил функцию setTimeOut, чтобы задержать загрузку этих изображений, и я использую css-анимацию, чтобы создать эффект их загрузки по одному.

Эта функция запускается только один раз и происходит при наведении курсора мыши на родительский div 'thumbnail-wrapper'. Как только они загружены в DOM, я создал еще одну функцию, которая запускается на mouseleave и добавляет класс, скрытый к изображениям ролловера.

Затем у меня есть другая функция, которая запускается при наведении курсора мыши, которая эффективно работает так же, как и первая, но на этот раз просто добавляет класс 'fadeIn' и динамически добавляет значение z-index, чтобы они отображались для загрузки поверх каждого другой.

Это все работает, если пользователь удерживает указатель мыши на «thumbnail-wrapper», так как все imgs имеют время для загрузки. Однако, если вы покидаете 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>

1 Ответ

0 голосов
/ 06 июля 2018

Попробуйте это ... 

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;
        });

      }
    });
...