lodash的防抖在匿名函数中无法正常工作。

14 浏览
0 Comments

lodash的防抖在匿名函数中无法正常工作。

大家好，我无法弄清楚为什么当直接传递给keyup事件时，防抖函数能够按预期工作，但如果我将其包裹在一个匿名函数中，它就无法工作。

我在这个问题上有一个Fiddle：http://jsfiddle.net/6hg95/1/

编辑：我尝试了所有的方法。

HTML

JavaScript

$(document).ready(function(){
    $('#anonFunction').on('keyup', function () {
        return _.debounce(debounceIt, 500, false); //为什么这个与#function不同
    });
    $('#noReturnAnonFunction').on('keyup', function () {
        _.debounce(debounceIt, 500, false); //未执行
    });
    $('#exeDebouncedFunc').on('keyup', function () {
        _.debounce(debounceIt, 500, false)(); //执行防抖函数结果不正确
    });
    $('#function').on('keyup', _.debounce(debounceIt, 500, false)); //这个可以工作。
});
function debounceIt(){
    $('#output').append('debounced');
}

`anonFunction`和`noReturnAnonFunction`不会触发防抖函数，但最后的`function`会触发。我不明白为什么会这样。请问有人可以帮我理解一下吗？

编辑：好的，`#exeDebouncedFunc`（你指的那个）之所以没有发生防抖，是因为该函数在匿名函数的作用域中执行，而另一个keyup事件会在另一个匿名作用域中创建一个新函数；因此，每次输入内容时都会触发防抖函数（而不是期望的只触发一次，参见`#function`的行为）。

请问你能解释一下`#anonFunction`和`#function`之间的区别吗？这是否又是作用域问题，为什么其中一个起作用而另一个不起作用？

编辑：好的，现在我明白为什么会发生这种情况了。下面是我需要将其包装在匿名函数中的原因：

Fiddle：http://jsfiddle.net/6hg95/5/

HTML

JavaScript

(function(){
    var debounce = _.debounce(fireServerEvent, 500, false);
    $('#anonFunction').on('keyup', function () {
        //清空文本框
        $('#output').append('clearNotifications');
        debounce();
    });
    function fireServerEvent(){
        $('#output').append('serverEvent');
    }
})();

0