Question

Ben Alman's jQuery Debounce plugin我遇到语法问题。它以一种格式按预期工作，但我需要另一种格式。

如何在不抛出错误的情况下完成这项工作？

coolThing.on({
    keydown: function() {

        console.log('keydown');

        $.debounce(500, function() { // Uncaught TypeError: Cannot read property 'toLowerCase' of undefined :(

            debugLog('debounced keydown');
        })();
    }),
    focus: function() {

        console.log('focus');
    }),
    blur: function() {

        console.log('blur');
    })
});

谢谢！

__

以下是其他有效的格式：

coolThing.keydown($.debounce(500, function() {

    console.log('debounced keydown');
}));

coolThing.on({
    keydown: function() {

        console.log('keydown');
    }),
    focus: function() {

        console.log('focus');
    }),
    blur: function() {

        console.log('blur');
    })
});

coolThing.on({
    keydown: $.debounce(500, function(e) {

        // wouldn't it be great to execute other things before $.debounce()?

        debugLog('debounced keydown');
    }),
    focus: function() {

        console.log('focus');
    }),
    blur: function() {

        console.log('blur');
    })
});

Answer 1

这不会按原样运作。 $.debounce()返回一个“代理”函数，该函数仅在自上次调用之后经过的时间大于您指定的时间段时才运行事件处理程序。

代码的问题在于，每次调用事件处理程序时都会创建新的$.debounce()实例（因此新的代理实例），因此debounce无法跟踪上次调用时间。

不可否认，以上不会出现您遇到的TypeError，并且看过debounce来源后，我不确定 TypeError来自哪里，但是一旦你修复了TypeError，你就会遇到我上面提到的更致命的问题。

您反而希望做的是：

分别指定处理程序。一个用于去抖动，另一个用于你想要立即发生的事情;

coolThing.on({
    keydown: function() {

        console.log('keydown');

    },
    focus: function() {

        console.log('focus');
    },
    blur: function() {

        console.log('blur');
    }
}).on('keydown', $.debounce(500, function () {

});

开始使用setTimeout。

使用大规模的IIFE黑客攻击;

coolThing.on({
    keydown: (function () {
        var bounce = $.debounce(500, function () {

        });

        return function (e) {
            bounce.apply(this, arguments);

            console.log('keydown');
        };
    }()),
    focus: function() {

        console.log('focus');
    },
    blur: function() {

        console.log('blur');
    }
});

替代方案按照我推荐的顺序提供。

如何格式化Ben Alman的jQuery Debounce

1 个答案: