我有以下云标签(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斌演示
如果您有任何问题或澄清,请随时发表评论。