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(function, wait, [options])

创建并返回传递函数的新的受限制版本，当重复调用时，每隔等待毫秒最多只调用一次原始函数。对于速度限制事件非常有用，这些事件的发生速度比您能跟上的速度要快。

默认情况下，第一次调用时，throttle会立即执行该功能，如果在等待期间再次调用该功能，则一旦该时间段结束，就会立即执行该功能。如果您想要禁用前沿调用，请传递{leading：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

或者更像是文档示例。

示例2

...

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

var throttledInstantSearch = _.throttle(InstantSearch, 1000)

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

JS Bin Demo

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

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

1 个答案:

节气门

我的解释

实施例