Как реализовать debounce jQuery Бена Алмана?

Я использую этот проект: https://github.com/cowboy/jquery-throttle-debounce

Мой код вроде как работает, но отказ игнорируется. Таким образом, функция водопада вызывается при каждой загрузке изображения, но двухсекундная задержка не соблюдается. Никаких ошибок не показывает.

Каков правильный способ реализовать это? Я возился с этим в течение 3 часов, но не могу найти решение.

(function($) {
  $(document).ready(function(e) {

    var $waterfall = $('.waterfall');
    if ($waterfall.length) {
      $waterfall.waterfall({});
    }

    // sort the waterfall when images are loaded
    var $waterfall_images = $waterfall.find('img');
    $waterfall_images.each(function(j, image) {
      var $img = $(image);

      $img.load(function() {
        $.debounce(2000, $waterfall.waterfall('sort'));
      });

    });

  });
})(jQuery);
<ul class="waterfall">
  <li class="waterfall-item">
    <a href="hidden link" title="hidden title">
      <img alt="hidden alt" title="hidden title" data-srcset="hidden in this example" data-src="also hidden in this example" src="still hidden in this example" data-sizes="(min-width:440px) 300px, 95vw" class=" lazyloaded" sizes="(min-width:440px) 300px, 95vw"
      srcset="think I'll hide this one too">
      <span class="waterfallImgOverlay"></span>
    </a>

  </li>
</ul>


javascript jquery debounce
person Community    schedule 10.01.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы вызываете метод, а не назначаете ссылку. Самое простое, обернуть это в функцию. Во-вторых, debounce возвращает метод, поэтому вам нужно сохранить то, что он возвращает, а затем вызвать этот метод.

(function($) {
  $(document).ready(function(e) {

    var $waterfall = $('.waterfall');
    if ($waterfall.length) {
      $waterfall.waterfall({});
    }

    var waterfallSort = $.debounce(2000, function(){ $waterfall.waterfall('sort'); });

    // sort the waterfall when images are loaded
    var $waterfall_images = $waterfall.find('img');
    $waterfall_images.each(function(j, image) {
      var $img = $(image);

      $img.load( waterfallSort );

    });

  });
})(jQuery);
person epascarello    schedule 10.01.2017
comment
Он по-прежнему не учитывает задержку ... Он загружает первый набор изображений примерно через 500 мс, второй набор - еще через 500 мс, а третий и последний набор изображений - еще через 500 мс. Хотя задержка установлена ​​​​на 2 секунды, и даже если я поставлю ее намного выше, это ничего не изменит. - person ; 10.01.2017
comment
Там исправили. - person epascarello; 10.01.2017