使用 jscript 节流功能包装即时搜索


Wrapping a instant search with jscript throttle function

我有以下云标签(Goat1000)的代码,然后是即时查询。查询部分需要使用下划线.js库中的 throttle 函数包装。(否则我的服务器会继续崩溃!

 <script src="underscore-min.js"></script>
 <script src="jquery.tagcanvas.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function() {
   if( ! $('#myCanvas').tagcanvas({
     textColour : '#000000',
     outlineThickness : 1.5,
     maxSpeed : 0.04,
     depth : 0.25,
     textScale : 5,
     textFont : '"Arial Black", Gadget, sans-serif',
     textHeight : 20,
     bgColour : '#FFAF1C', 
     outlineColour : '#4EF2B1',
     bgOutlineThickness : 0,
     freezeDecel : true,
     frontSelect : true,
     wheelZoom : false,
     weight : true
   }))
    {
     // TagCanvas failed to load
     $('#myCanvasContainer').hide();
   }
  //INSERT THE THROTTLE FUNCTION ON THE BELOW INSTANT SEARCH 
  $('#keyword').on('input', function() {
            var searchKeyword = $(this).val();
            if (searchKeyword.length >= 0) {
                $.post('search2.php', { keywords: searchKeyword }, function(data) {
                    $('ul#content').empty()
                    $.each(data, function() {
                        $('ul#content').append('<a href="getgift2.php?id=' + this.Horse + '">' + this.Horse + '  '+ this.odds+' ' + this.trkfullnm +'</a><br /><br />');
                    });
                }, "json");
            }
        });

     });
 </script>

我把你的问题解释为更多的"我如何使用下划线.js的油门功能"

如果您访问下划线文档上的油门,这就是它在撰写本文时所说的内容。

节流阀

_.throttle(function, wait, [options]) 

创建并返回所传递函数的新受限制版本,当重复调用该版本时,每个等待毫秒最多只能调用一次原始函数。对于发生速度超过您跟上速度的速率限制事件很有用。

默认情况下,throttle 将在您第一次调用该函数时立即执行该函数,如果您在等待期间再次调用该函数任意次数,则在该时间段结束后立即执行该函数。如果要禁用前沿调用,请传递 {leading: false},如果要禁用后缘上的执行,请传递 {尾随:假}。

var throttled =  `_.throttle(updatePosition, 100);`
$(window).scroll(throttled);`

我的解释

解释文档可能有点困难。我觉得这些文档对方法如何工作的解释非常简洁。我会先看一下函数签名,_.throttle(function, wait, [options])它告诉你第一个参数是一个函数,如果你使用过JavaScript,你可能已经注意到函数可以传递给其他函数。返回函数或接受函数作为参数的函数是高阶函数。几乎所有下划线.js方法都是高阶函数。函数的第二个参数是以毫秒为单位的等待间隔,有点像settimeout的第二个也是最后一个参数。最后一个参数周围有括号,这意味着它是可选的。如果您阅读了{trailing: true, leading: true}默认选项的说明,则最后一个参数是选项对象,并且您可以通过将对象作为第三个参数发送并带有尾随 false 或前导 false 来覆盖它们。

现在是描述。它说"创建并返回传递函数的新限制版本"。这个函数就是我想你可以称之为"真正的"高阶函数,因为它既接受一个函数作为它的参数,又返回一个函数。如果您阅读其余文档,您会更多地了解其功能,我想您了解它的功能,所以我觉得没有必要在这里解释。文档向您推断,throttle返回一个新函数,该函数将其所有参数传递给您传递的函数,同时限制它。

所以要用油门法。将该方法作为签名状态调用,然后将限制调用的结果分配给变量,然后在使用常规函数的任何位置使用该变量。(请参阅示例 2)您也可以直接使用该方法,而无需将其分配给变量。(请参阅示例 1)

例子

例 1

...    
$('#keyword').on('input', _.throttle(function(e) {
    var searchKeyword = $(this).val();
    ...
}, 1000));

JS斌演示

或者更像文档示例。

例 2

...
function InstantSearch (e) {
    var searchKeyword = $(this).val();
    ...
}
var throttledInstantSearch = _.throttle(InstantSearch, 1000)
$('#keyword').on('input', throttledInstantSearch);

JS斌演示

如果您有任何问题或澄清,请随时发表评论。