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

问题描述：

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

Hello I cannot seem to figure out why the debounce function works as expected when passed directly to a keyup event; but it does not work if I wrap it inside an anonymous function.

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

编辑：添加了我尝试的所有内容。

Added all the things I tried.

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 不会触发去抖功能;但是最后一个函数确实会触发。我不明白为什么会这样。任何人都可以帮我理解这个吗？

anonFunction and noReturnAnonFunction does not fire the debounce function; but the last function does fire. I do not understand why this is. Can anybody please help me understand this?

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

EDIT Ok, so the reason that the debounce does not happen in #exeDebouncedFunc (the one you refer) is because the function is executed in the scope of the anonymous function and another keyup event will create a new function in another anonymous scope; thus firing the debounced function as many times as you type something (instead of firing once which would be the expected behaviour; see beviour of #function)?

您能解释 #anonFunction 与 #function 之间的区别。这又是一个范围问题，为什么其中一个有效，另一个没有？

Can you please explain the difference between #anonFunction and the #function. Is this again a matter of scoping why one of them works and the other does not?

编辑
好的，所以现在我明白为什么会这样。这就是为什么我需要将它包装在一个匿名函数中：

EDIT Ok, so now I understand why this is happening. And here is why I needed to wrap it inside an anonymous 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/>');
    }
})();

答

正如Palpatim所解释的那样，原因在于 _.debouce（...）返回一个函数，在调用它时它是神奇的。

As Palpatim explained, the reason lies in the fact that _.debouce(...) returns a function, which when invoked does it's magic.

因此在你的 #anonFunction 例如，你有一个密钥监听器，在调用时什么也不做，只是向调用者返回一个函数，它对事件监听器的返回值没有任何作用。

Therefore in your #anonFunction example, you have a key listener, which when invoked does nothing but return a function to the invoker, which does nothing with the return values from the event listener.

这是 _。去抖（...）定义的片段：

_.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（...）中返回的函数调用您的事件监听器。

Your key event listener must invoke the returned function from _.debounce(...), or you can do as in your non-anonymous example and use the returned function from the _.debounce(...) call as your event listener.

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

相关推荐