javascript中取消公告的实时搜索未执行闭包
下面的代码模拟了通过控制台执行实时搜索(替换为控制台输出) 调用了去盎司函数,但未调用传递的javascript中取消公告的实时搜索未执行闭包,javascript,jquery,debounce,Javascript,Jquery,Debounce,下面的代码模拟了通过控制台执行实时搜索(替换为控制台输出) 调用了去盎司函数,但未调用传递的liveSearch函数。我猜是因为debounce返回一个未执行的函数 我如何调用liveSearch,使其实际上被取消公告 var MySearch = (function($) { var $search = $('.search'), searchDelay = 500, keysToIgnore = [8, 16, 17, 18, 27, 32, 37,
liveSearch
函数。我猜是因为debounce
返回一个未执行的函数
我如何调用liveSearch
,使其实际上被取消公告
var MySearch = (function($) {
var $search = $('.search'),
searchDelay = 500,
keysToIgnore = [8, 16, 17, 18, 27, 32, 37, 38, 39, 40, 91, 191, 220]; // space, esc, bkspc, ctrl, alt, cmd, arrows, /\
function init() {
$search.on('keyup', function(e) {
if (keysToIgnore.indexOf(e.keyCode) == -1) {
// FIXME: this isn't actually executing the passed liveSearch fn
debounce(liveSearch, searchDelay);
// This executes liveSearch, but doesnt debounce
// debounce(liveSearch, searchDelay)();
}
});
}
function liveSearch() {
console.log("searching:", $search.val());
}
// Remy's debounce func:
// https://remysharp.com/2010/07/21/throttling-function-calls
function debounce(fn, delay) {
console.log("debouncing for", delay);
var timer = null;
return function () {
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
return {
init: init
};
}(jQuery));
jQuery(function() {
MySearch.init();
});
每次调用
debounce
都会使用计时器
变量创建自己的闭包。因此,debounce
函数被设计为只调用一次,并返回一个应该调用的函数,而不是liveSearch
:
function init() {
var debouncedLiveSearch = debounce(liveSearch, searchDelay);
$search.on('keyup', function(e) {
if (keysToIgnore.indexOf(e.keyCode) == -1) {
debouncedLiveSearch();
}
});
}