如何格式化 Ben Alman 的 jQuery Debounce

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() returns 一个 "proxy" 函数，仅当自上次调用以来经过的时间大于您指定的时间时才运行事件处理程序。

您的代码存在的问题是，每次调用事件处理程序时您都在创建新的 $.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 hack；

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

How to format Ben Alman's jQuery Debounce

jquery

syntax

debouncing