Ben Almanのdebounce jQueryの実装方法は？

Question

私はこのプロジェクトを使用しています：https://github.com/cowboy/jquery-throttle-debounce

私のコードは動作しますが、デバウンスは無視されています。 したがって、画像のロードごとにwaterfall関数が呼び出されますが、2秒の遅延は考慮されていません。エラーは表示されません。

これを実装する正しい方法は何ですか？ 私はこれを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>

Answer 1

あなたは、参照を割り当てていない、メソッドを呼び出しています。最も簡単なことは、関数でラップすることです。 2つ目は、デバウンスがメソッドを返すので、返すものを格納し、そのメソッドを呼び出す必要があります。

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