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.

I have fiddle of the problem: http://jsfiddle.net/6hg95/1/

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

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 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?

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的区别吗.这是否又是一个范围问题,为什么其中一个有效,而另一个无效?

EDIT个 好了,现在我明白为什么会发生这种事了.这就是为什么我需要将它包装在一个匿名函数中的原因:

小提琴: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/>');
    }
})();

推荐答案

As Palpatim explained, the reason lies in the fact that _.debounce(...) returns a function, which when invoked does its magic.

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(...)定义的一个片段:

_.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);
    };
  } 

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.

Jquery相关问答推荐

更改后如何使用 jQuery Select CSS 类

为什么我不能在 window.onload 事件的处理程序中将 $ jQuery 对象作为参数传递?

jQuery函数从数组中获取所有唯一元素?

寻找 jQuery 事件类型的完整列表

标识符 (id) 是否有通配符 Select 器?

jQuery.parseJSON 单引号与双引号

使用 JSONP 时如何捕获 jQuery $.getJSON(或数据类型设置为jsonp的 $.ajax)错误?

什么是不使用 jQuery 的经验技术原因?

jQuery JSON到字符串?

如何在 JQuery DataTable 中默认显示所有行

Select 除第一个之外的所有子元素

为什么找不到我的 json 文件?

Javascript中的选定文本事件触发器

JQuery Ajax Post 导致 500 内部服务器错误

jQuery '如果 .change() 或 .keyup()'

将数据发布到 JsonP

jquery - 从一个非常大的表中删除所有行的最快方法

粘性侧边栏:向下滚动时固定在底部,向上滚动时固定在顶部

JS - 从base64代码中获取图片的宽高

如何在 jquery 中获取 textarea 的值?