javascript - 使用 jscript 节流函数包装即时搜索

Question

我有以下云标签 (Goat1000) 代码，后跟即时查询。查询部分需要用 underscore.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>

Answer 1

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

如果您访问 throttle在下划线文档中，这是撰写本文时所说的内容。

throttle

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

Creates and returns a new, throttled version of the passed function, that, when invoked repeatedly, will only actually call the original function at most once per every wait milliseconds. Useful for rate-limiting events that occur faster than you can keep up with.

By default, throttle will execute the function as soon as you call it for the first time, and, if you call it again any number of times during the wait period, as soon as that period is over. If you'd like to disable the leading-edge call, pass {leading: false}, and if you'd like to disable the execution on the trailing-edge, pass {trailing: false}.

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

$(window).scroll(throttled);`

我的解读

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

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

所以要用 throttle 的方法。您将方法作为签名状态调用，然后将 throttle 调用的结果分配给一个变量，然后在您将使用常规函数的任何地方使用该变量。 (参见示例 2)您也可以直接使用该方法，您可以在其中使用常规函数 at 而无需将其分配给变量。 (见例一)

例子

示例 1

...    

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

JS Bin Demo

或者更像文档示例。

示例 2

...

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

var throttledInstantSearch = _.throttle(InstantSearch, 1000)

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

JS Bin Demo

如果您有任何问题或需要说明，请随时发表评论。