lodash debounce不能在匿名函数中工作

Question

您好我无法弄清楚为什么当直接传递给keyup事件时debounce函数按预期工作; 但如果我将它包装在匿名函数中,它就不起作用.

我有问题:http : //jsfiddle.net/6hg95/1/

编辑:添加了我尝试过的所有东西.

HTML

<input id='anonFunction'/>
<input id='noReturnAnonFunction'/>
<input id='exeDebouncedFunc'/>
<input id='function'/>
<div id='output'></div>

JAVASCRIPT

$(document).ready(function(){
    $('#anonFunction').on('keyup', function () {
        return _.debounce(debounceIt, 500, false); //Why does this differ from #function
    });
    $('#noReturnAnonFunction').on('keyup', function () {
        _.debounce(debounceIt, 500, false); //Not being executed
    });
    $('#exeDebouncedFunc').on('keyup', function () {
        _.debounce(debounceIt, 500, false)(); //Executing the debounced function results in wrong behaviour
    });
    $('#function').on('keyup', _.debounce(debounceIt, 500, false)); //This is working.
});

function debounceIt(){
    $('#output').append('debounced');
}

anonFunction并且noReturnAnonFunction不会启动去抖功能; 但是最后一次function起火了.我不明白为什么会这样.任何人都可以帮我理解这个吗？

编辑 好了,所以在#exeDebouncedFunc(你引用的那个)中没有发生去抖的原因是因为该函数在匿名函数的范围内执行而另一个keyup事件将在另一个匿名范围内创建一个新函数; 因此,当您键入内容时,多次触发去抖动函数(而不是一次性触发,这将是预期的行为;请参阅beviour #function)？

能否请您解释之间的差异#anonFunction和#function.这又是一个范围问题,为什么其中一个有效,另一个无效？

编辑 好的,现在我明白为什么会这样.这就是我需要将其包装在匿名函数中的原因:

小提琴:http://jsfiddle.net/6hg95/5/

HTML

<input id='anonFunction'/>
<div id='output'></div>

JAVASCRIPT

(function(){
    var debounce = _.debounce(fireServerEvent, 500, false);

    $('#anonFunction').on('keyup', function () {
        //clear textfield
        $('#output').append('clearNotifications<br/>');
        debounce();
    });

    function fireServerEvent(){
        $('#output').append('serverEvent<br/>');
    }
})();

Answer 1

正如Palpatim所解释的那样,原因在于_.debouce(...)返回一个函数,该函数在被调用时具有魔力.

因此,在您的#anonFunction示例中,您有一个键侦听器,在调用时只会向调用者返回一个函数,该函数不会对事件侦听器的返回值执行任何操作.

这是_.debounce(...)定义的片段:

_.debounce
function (func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      if (immediate && !timeout) func.apply(context, args);
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  } 

您的键事件侦听器必须从_.debounce(...)您的非匿名示例中_.debounce(...)调用返回的函数,并且可以将调用中返回的函数用作事件侦听器.

Answer 2

debounce 不执行该函数,它返回一个内置了debounciness的函数.

返回

(功能):返回新的去抖动功能.

所以你的#function处理程序实际上正在做正确的事情,通过返回一个由jQuery用作keyup处理程序的函数.要修复您的#noReturnAnonFunction示例,您只需在函数的上下文中执行去抖动函数:

$('#noReturnAnonFunction').on('keyup', function () {
    _.debounce(debounceIt, 500, false)(); // Immediately executes
});

但是这会引入一个不必要的匿名函数包装你的debounce.

Answer 3

想想更容易

_.debounce返回去抖功能!所以不要考虑

$el.on('keyup'), function(){
   _.debounce(doYourThing,500); //uh I want to debounce this
}

你宁愿调用debounced函数

var doYourThingDebounced = _.debounce(doYourThing, 500); //YES, this will always be debounced

$el.on('keyup', doYourThingDebounced);

Answer 4

您可以像这样返回去抖功能:

(function(){
    var debounce = _.debounce(fireServerEvent, 500, false);

    $('#anonFunction').on('keyup', function () {
        //clear textfield
        $('#output').append('clearNotifications<br/>');
        return debounce();
    });

    function fireServerEvent(){
        $('#output').append('serverEvent<br/>');
    }
})();