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

我将你的问题解释为 "How do I use underscore.js's throttle function"

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

油门

_.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，您可能已经注意到函数可以传递给其他函数。 returns 函数或接受函数作为参数的函数是高阶函数。几乎所有 underscore.js 方法都是高阶函数。函数的第二个参数是以毫秒为单位的等待间隔，有点像 settimeout 的第二个也是最后一个参数。最后一个参数有括号，这意味着它是可选的。最后一个参数是一个选项对象，如果你阅读了描述，默认选项是 {trailing: true, leading: true}，你可以通过发送一个对象作为第三个参数来覆盖它们，尾随 false 或前导 false。

现在开始描述。它说 "Creates and returns a new, throttled version of the passed function,"。这个函数是我猜你可以调用的 "true" 高阶函数，因为它既接受一个函数作为参数，又接受 returns 一个函数。如果您阅读其余文档，您会了解更多有关其功能的信息，我认为您了解它的节流功能，因此我觉得没有必要在这里解释。文档向您推断 throttle returns 一个新函数，它在限制它的同时将其所有参数传递给您传入的函数。

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

例子

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

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

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

Wrapping a instant search with jscript throttle function

javascript

php

mysql

jquery

underscore.js

油门

我的解读

例子