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

我有以下云标签（Goat1000）的代码，后面是即时查询。查询部分需要使用underscore.js库中的节流功能进行包装。（否则我的服务器将继续崩溃！）

 <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>

最佳答案

我将您的问题解释为“如何使用underscore.js的节流功能”

如果您访问下划线文档上的throttle，这就是撰写本文时所说的。

节气门

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

  创建并返回传递的函数的新的受限制的版本，当反复调用该函数时，每等待一个毫秒最多只能实际调用一次原始函数。对于速率限制事件的发生很有用，这些事件的发生速度比您所能追赶的快。

  默认情况下，节流阀将在您首次调用该函数时立即执行，如果在等待期间再次调用该函数任意次，则该周期结束后将立即执行。如果要禁用前沿调用，请传递{lead：false}，如果要禁用后沿调用，请传递
  {trailing：false}。

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

$(window).scroll(throttled);`

我的解释

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

现在说明。它说：“创建并返回所传递函数的新的受限制版本”。我猜您可以称呼此函数为“真正的”高阶函数，因为它既接受函数作为参数，又返回函数。如果您阅读了其余的文档，您会学到更多关于它的功能的知识，我认为您了解它在节流方面的功能，因此我认为无需在这里进行解释。文档推断您throttle返回一个新函数，该函数在节流时将所有参数传递给您传入的函数。

因此要使用油门方法。您将方法作为签名状态进行调用，然后将油门调用的结果分配给一个变量，然后在将要使用常规函数的任何位置使用该变量。（请参见示例2）您也可以在不使用常规函数的情况下直接使用该方法，而无需将其分配给变量。（请参见示例1）

例子

例子1

...

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

JS Bin Demo

或者更像docs示例。

例子2

...

function InstantSearch (e) {
    var searchKeyword = $(this).val();
    ...
}

var throttledInstantSearch = _.throttle(InstantSearch, 1000)

$('#keyword').on('input', throttledInstantSearch);

JS Bin Demo

如有任何疑问或澄清，请随时发表评论。